|
1 | | -# <p align="center">Shared React variables</p> |
| 1 | +# Shared React variables |
2 | 2 |
|
3 | | -Easy and comfortable React mutable state manager on hooks. It's extremely simple - you generate a hook in one line and then you can use it anywhere to operate with your state! Also you can have any number of such variables in your application. |
| 3 | + |
| 4 | + |
| 5 | + |
| 6 | + |
| 7 | + |
| 8 | +[](https://github.com/prettier/prettier) |
4 | 9 |
|
5 | | -## <p align="center">1. Exported types</p> |
| 10 | +## ✨ **About** |
| 11 | + |
| 12 | +Shared React variables provide you easy and comfortable mutable state management based on hooks. It's extremely simple - you generate a hook in one line and then you can use it anywhere to operate with your state! Also you can have any number of such state variables in your application. |
| 13 | + |
| 14 | +## 🔍 **Exported types** |
6 | 15 |
|
7 | 16 | ```ts |
8 | 17 | type ReactVariableHook<T> = (rerenderOnChange?: boolean) => T; |
9 | 18 | ``` |
10 | 19 |
|
11 | | -## <p align="center">2. API</p> |
| 20 | +## 📖 **API** |
12 | 21 |
|
13 | 22 | ### <p align="center">createUseSharedVariable</p> |
14 | | -#### **Description** |
| 23 | +#### Description |
15 | 24 | Takes initial state as a parameter. Returns a hook can be imported and used anywhere in your application. When you use this hook, it returns you mutable global state. Whenever this state is changed component will be rerendered (this behaviour can be changed via *rerenderOnChange* flag in the hook). |
16 | 25 |
|
17 | | -#### **Signature** |
| 26 | +#### Signature |
18 | 27 | ```ts |
19 | 28 | <T extends object>(initialState: T) => ReactVariableHook<T>; |
20 | 29 | ``` |
21 | 30 |
|
22 | | -#### **Usage example** |
| 31 | +#### Usage example |
23 | 32 | ```ts |
24 | 33 | // feel free to use this state hook anywhere! |
25 | 34 | const useTimer = createUseSharedVariable({ ticks: 0 }); |
26 | 35 |
|
27 | 36 | export { useTimer } |
28 | 37 | ``` |
29 | 38 |
|
30 | | -## <p align="center">3. Package usage example</p> |
| 39 | +## 💡 **Package usage example** |
31 | 40 |
|
32 | 41 | https://codesandbox.io/s/react-shared-variables-example-f7feo7 |
0 commit comments