@siberiacancode/reactuse 0.2.6 → 0.2.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +66 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,12 +1,71 @@
|
|
|
1
|
-
|
|
1
|
+
<div align="center">
|
|
2
|
+
<a href="https://reactuse.dev">
|
|
3
|
+
<picture>
|
|
4
|
+
<img alt="React Use logo" src="https://siberiacancode.github.io/reactuse/logo.svg" height="128">
|
|
5
|
+
</picture>
|
|
6
|
+
</a>
|
|
7
|
+
<h1>React Use</h1>
|
|
2
8
|
|
|
3
|
-
|
|
9
|
+
<a href="https://www.npmjs.com/package/@siberiacancode/reactuse"><img alt="NPM version" src="https://img.shields.io/npm/v/@siberiacancode/reactuse.svg?style=for-the-badge&labelColor=000000"></a>
|
|
10
|
+
<a href="https://github.com/siberiacancode/reactuse/blob/main/LICENSE"><img alt="License" src="https://img.shields.io/npm/l/@siberiacancode/reactuse.svg?style=for-the-badge&labelColor=000000"></a>
|
|
11
|
+
<a href="https://github.com/siberiacancode/reactuse/discussions"><img alt="Join the community on GitHub" src="https://img.shields.io/badge/Join%20the%20community-blueviolet.svg?style=for-the-badge&logo=React&labelColor=000000&logoWidth=20"></a>
|
|
4
12
|
|
|
5
|
-
|
|
13
|
+
</div>
|
|
6
14
|
|
|
7
|
-
|
|
15
|
+
React Use delivers **production-ready hooks** that solve real-world problems. Built with **TypeScript-first** approach, **SSR compatibility**, and **tree-shaking optimization** - everything you need to build modern React applications. Improve your react applications with our library 📦 designed for comfort and speed.
|
|
8
16
|
|
|
9
|
-
##
|
|
17
|
+
## Documentation
|
|
10
18
|
|
|
11
|
-
|
|
12
|
-
|
|
19
|
+
Visit https://siberiacancode.github.io/reactuse to view the full documentation.
|
|
20
|
+
|
|
21
|
+
## Getting Started
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install @siberiacancode/reactuse
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import { useCounter } from '@reactuses/core';
|
|
29
|
+
|
|
30
|
+
function App() {
|
|
31
|
+
const counter = useCounter(0);
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<div>
|
|
35
|
+
<h1>Count: {const.value}</h1>
|
|
36
|
+
<button onClick={() => const.inc()}>+1</button>
|
|
37
|
+
<button onClick={() => const.dec()}>-1</button>
|
|
38
|
+
</div>
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## CLI installation
|
|
44
|
+
|
|
45
|
+
Use the CLI to add hooks to your project with [useverse](https://www.npmjs.com/package/useverse).
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
npx useverse@latest init
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
```bash
|
|
52
|
+
npx useverse@latest add [hook]
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
You will be presented with a list of hooks to choose from:
|
|
56
|
+
|
|
57
|
+
```bash
|
|
58
|
+
Which hooks would you like to add? › Space to select. A to toggle all.
|
|
59
|
+
Enter to submit.
|
|
60
|
+
|
|
61
|
+
◯ useActiveElement
|
|
62
|
+
◯ useAsync
|
|
63
|
+
◯ useBattery
|
|
64
|
+
◯ useBluetooth
|
|
65
|
+
◯ useBoolean
|
|
66
|
+
◯ useBreakpoints
|
|
67
|
+
◯ useBrowserLanguage
|
|
68
|
+
◯ useClickOutside
|
|
69
|
+
◯ useClipboard
|
|
70
|
+
◯ useConst
|
|
71
|
+
```
|