Skip to content

Commit f8e14f7

Browse files
LuisFerLCCLuisFerLCC
committed
Base NPM TS package
1 parent 34a9d16 commit f8e14f7

File tree

13 files changed

+560
-106
lines changed

13 files changed

+560
-106
lines changed

‎.editorconfig‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
end_of_line = crlf
6+
indent_style = tab
7+
indent_size = 4
8+
max_line_length = 133
9+
insert_final_newline = true
10+
trim_trailing_whitespace = true
11+
quote_type = double
12+
13+
[*.yml]
14+
indent_style = space
15+
indent_size = 2
16+
17+
[*.md]
18+
max_line_length = off
19+
trim_trailing_whitespace = false

‎.gitignore‎

Lines changed: 27 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,27 @@
1-
# Logs
2-
logs
3-
*.log
4-
npm-debug.log*
5-
yarn-debug.log*
6-
yarn-error.log*
7-
lerna-debug.log*
8-
9-
# Diagnostic reports (https://nodejs.org/api/report.html)
10-
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11-
12-
# Runtime data
13-
pids
14-
*.pid
15-
*.seed
16-
*.pid.lock
17-
18-
# Directory for instrumented libs generated by jscoverage/JSCover
19-
lib-cov
20-
21-
# Coverage directory used by tools like istanbul
22-
coverage
23-
*.lcov
24-
25-
# nyc test coverage
26-
.nyc_output
27-
28-
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29-
.grunt
30-
31-
# Bower dependency directory (https://bower.io/)
32-
bower_components
33-
34-
# node-waf configuration
35-
.lock-wscript
36-
37-
# Compiled binary addons (https://nodejs.org/api/addons.html)
38-
build/Release
39-
40-
# Dependency directories
41-
node_modules/
42-
jspm_packages/
43-
44-
# TypeScript v1 declaration files
45-
typings/
46-
47-
# TypeScript cache
48-
*.tsbuildinfo
49-
50-
# Optional npm cache directory
51-
.npm
52-
53-
# Optional eslint cache
54-
.eslintcache
55-
56-
# Microbundle cache
57-
.rpt2_cache/
58-
.rts2_cache_cjs/
59-
.rts2_cache_es/
60-
.rts2_cache_umd/
61-
62-
# Optional REPL history
63-
.node_repl_history
64-
65-
# Output of 'npm pack'
66-
*.tgz
67-
68-
# Yarn Integrity file
69-
.yarn-integrity
70-
71-
# dotenv environment variables file
72-
.env
73-
.env.test
74-
75-
# parcel-bundler cache (https://parceljs.org/)
76-
.cache
77-
78-
# Next.js build output
79-
.next
80-
81-
# Nuxt.js build / generate output
82-
.nuxt
83-
dist
84-
85-
# Gatsby files
86-
.cache/
87-
# Comment in the public line in if your project uses Gatsby and *not* Next.js
88-
# https://nextjs.org/blog/next-9-1#public-directory-support
89-
# public
90-
91-
# vuepress build output
92-
.vuepress/dist
93-
94-
# Serverless directories
95-
.serverless/
96-
97-
# FuseBox cache
98-
.fusebox/
99-
100-
# DynamoDB Local files
101-
.dynamodb/
102-
103-
# TernJS port file
104-
.tern-port
1+
# dependencies
2+
/node_modules
3+
4+
# production
5+
/dist
6+
/typings
7+
8+
# IDEs and editors
9+
/.idea
10+
.project
11+
.classpath
12+
.c9/
13+
*.launch
14+
.settings/
15+
*.sublime-workspace
16+
17+
# IDE - VSCode
18+
.vscode/*
19+
!.vscode/settings.json
20+
!.vscode/tasks.json
21+
!.vscode/launch.json
22+
!.vscode/extensions.json
23+
.history/*
24+
25+
# misc
26+
npm-debug.log
27+
yarn-error.log

‎.npmignore‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# dependencies
2+
/node_modules
3+
4+
# source
5+
/src
6+
/.github
7+
.gitignore
8+
9+
# IDEs and editors
10+
/.idea
11+
.project
12+
.classpath
13+
.c9/
14+
*.launch
15+
.settings/
16+
*.sublime-workspace
17+
/.vscode
18+
.editorconfig
19+
.prettierignore
20+
tsconfig.json

‎.prettierignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# dependencies
2+
/node_modules
3+
4+
# production
5+
/dist
6+
/typings

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"cSpell.words": ["ftreact", "tsftreact"]
3+
}

‎.vscode/tasks.json‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
{
2+
"version": "2.0.0",
3+
4+
"tasks": [
5+
{
6+
"label": "TypeScript: Watch Mode",
7+
8+
"type": "typescript",
9+
"tsconfig": "tsconfig.json",
10+
"option": "watch",
11+
12+
"isBackground": true,
13+
"group": "build"
14+
},
15+
16+
{
17+
"label": "Prettier: Pretty-print...",
18+
19+
"type": "shell",
20+
"command": "prettier --write ${input:files}",
21+
22+
"isBackground": true
23+
},
24+
25+
{
26+
"label": "NPM: Build",
27+
28+
"type": "npm",
29+
"script": "build",
30+
31+
"isBackground": true,
32+
"group": "build"
33+
},
34+
35+
{
36+
"label": "NPM: Install dependencies",
37+
38+
"type": "shell",
39+
"command": "npm i ${input:packages}",
40+
41+
"problemMatcher": []
42+
},
43+
44+
{
45+
"label": "NPM: Install peer dependencies",
46+
47+
"type": "shell",
48+
"command": "npm i --save-peer ${input:packages}",
49+
50+
"problemMatcher": []
51+
},
52+
53+
{
54+
"label": "NPM: Install development dependencies",
55+
56+
"type": "shell",
57+
"command": "npm i --save-dev ${input:packages}",
58+
59+
"problemMatcher": []
60+
},
61+
62+
{
63+
"label": "NPM: Install all production dependencies",
64+
65+
"type": "shell",
66+
"command": "npm i --production",
67+
68+
"problemMatcher": []
69+
},
70+
71+
{
72+
"label": "NPM: Uninstall dependencies",
73+
74+
"type": "shell",
75+
"command": "npm un ${input:delPackages}",
76+
77+
"problemMatcher": []
78+
},
79+
80+
{
81+
"label": "System: Delete permanently...",
82+
83+
"type": "shell",
84+
"command": "rm -rf ${input:delFiles}",
85+
86+
"problemMatcher": []
87+
}
88+
],
89+
90+
"inputs": [
91+
{
92+
"id": "packages",
93+
"description": "Dependencies to install",
94+
"type": "promptString"
95+
},
96+
97+
{
98+
"id": "delPackages",
99+
"description": "Dependencies to uninstall",
100+
"type": "promptString"
101+
},
102+
103+
{
104+
"id": "files",
105+
"description": "Files or directories to overwrite",
106+
"type": "promptString"
107+
},
108+
109+
{
110+
"id": "delFiles",
111+
"description": "Files or directories to delete",
112+
"type": "promptString"
113+
}
114+
]
115+
}

‎README.md‎

Lines changed: 87 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,87 @@
1-
# react
2-
A React hook wrapper for Float Toolkit
1+
<div align="center" style="margin-bottom: 0.5rem">
2+
<img src="https://raw.githubusercontent.com/float-toolkit/react/HEAD/media/ftreact.svg" width="150" />
3+
</div>
4+
5+
<div align="center">
6+
7+
# Float Toolkit for React
8+
9+
[![NPM latest version](https://img.shields.io/npm/v/@float-toolkit/react?label=version&logo=npm)](https://www.npmjs.com/package/@float-toolkit/react)
10+
[![NPM downloads](https://img.shields.io/npm/dt/@float-toolkit/react?logo=npm)](https://www.npmjs.com/package/@float-toolkit/react)
11+
12+
</div>
13+
14+
A [React](https://reactjs.org/) [hook](https://reactjs.org/docs/hooks-intro.html) wrapper for [**Float Toolkit**](https://https://float-toolkit.web.app/)
15+
16+
## Get started
17+
18+
### Installation
19+
20+
To add Float Toolkit to your React app, run this command:
21+
22+
```sh-session
23+
npm install @float-toolkit/react
24+
```
25+
26+
### Usage
27+
28+
The package export is a **React hook** called `useFloatToolkit`. It can be called from within a Function Component to create an outlet (reactive output).
29+
30+
```js
31+
import React, { useEffect } from "react";
32+
import useFloatToolkit from "@float-toolkit/react";
33+
34+
function Sum({ x, y }) {
35+
const { add, outlet } = useFloatToolkit();
36+
37+
useEffect(() => {
38+
add([x, y]);
39+
}, [x, y]);
40+
41+
return <span className="number">{outlet}</span>;
42+
}
43+
```
44+
45+
### TypeScript
46+
47+
<div align="center" style="margin: 0.5rem 0">
48+
<img src="https://raw.githubusercontent.com/float-toolkit/react/HEAD/media/tsftreact.svg" width="100" />
49+
</div>
50+
51+
Just like its parent package, Float Toolkit for React is written in [TypeScript](https://www.typescriptlang.org/). You can import the `ReactFT` namespace which contains all the type declarations used by the package.
52+
53+
#### Example:
54+
55+
```tsx
56+
import React, { FC, useEffect } from "react";
57+
import useFloatToolkit, { ReactFT } from "@float-toolkit/react";
58+
59+
interface Props {
60+
numbers: number[];
61+
precision: ReactFT.Precision;
62+
}
63+
64+
const Sum: FC = (props) => {
65+
const { add, outlet } = useFloatToolkit(props.precision);
66+
67+
useEffect(() => {
68+
add(props.numbers);
69+
}, [props.numbers]);
70+
71+
return <span className="number">{outlet}</span>;
72+
};
73+
```
74+
75+
## Links
76+
77+
- [FloatToolkit documentation (Vanilla JS)](https://float-toolkit.web.app/)
78+
- [GitHub](https://github.com/float-toolkit/react)
79+
- [npm](https://www.npmjs.com/package/@float-toolkit/react)
80+
81+
## Contributing
82+
83+
Before creating an issue, please consider the following:
84+
85+
- Refer to the [FloatToolkit documentation](https://float-toolkit.web.app/) and read **this file** carefully to make sure the error is actually a bug and not a mistake of your own.
86+
- Make sure the issue hasn't already been reported or suggested.
87+
- After following these steps, you can read the [contribution guidelines](https://github.com/float-toolkit/react/blob/master/.github/CONTRIBUTING.md) and follow the steps to submit a PR.

‎media/ftreact.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎media/tsftreact.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)