Skip to content

Commit b992084

Browse files
committed
Add README.md
1 parent 17f5f3b commit b992084

File tree

1 file changed

+257
-0
lines changed

1 file changed

+257
-0
lines changed

README.md

Lines changed: 257 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
1+
[![Version](https://img.shields.io/npm/v/react-store-context-hooks)](https://bit.ly/3CrKTGs)
2+
[![Downloads](https://img.shields.io/npm/dt/react-store-context-hooks)](https://bit.ly/3CrKTGs)
3+
<!---
4+
[![Dependency Status](https://img.shields.io/david/rickypc/react-store-context-hooks)](https://bit.ly/2XIejB8)
5+
[![Dev Dependency Status](https://img.shields.io/david/dev/rickypc/react-store-context-hooks)](https://bit.ly/3mbPI1a)
6+
-->
7+
[![Code Style](https://img.shields.io/badge/code%20style-Airbnb-red)](https://bit.ly/2JYN1gk)
8+
[![Build](https://img.shields.io/github/workflow/status/rickypc/react-store-context-hooks/Validations)](https://bit.ly/2XL1lCJ)
9+
[![Coverage](https://img.shields.io/codecov/c/github/rickypc/react-store-context-hooks)](https://bit.ly/3bd4kam)
10+
[![Vulnerability](https://img.shields.io/snyk/vulnerabilities/github/rickypc/react-store-context-hooks)](https://bit.ly/3bhs0Kp)
11+
<!---
12+
[![Dependabot](https://api.dependabot.com/badges/status?host=github&repo=rickypc/react-store-context-hooks)](https://bit.ly/2KIM5vs)
13+
-->
14+
[![License](https://img.shields.io/npm/l/react-store-context-hooks)](https://mzl.la/2vLmCye)
15+
16+
React Store Context Hooks
17+
=========================
18+
19+
Provides various data store hooks that allow functional components within
20+
the same React Context to share the application state.
21+
22+
CDN Link
23+
-
24+
```html
25+
<script crossorigin src="https://unpkg.com/react-store-context-hook/index.umd.js"></script>
26+
```
27+
28+
Node.js Installation
29+
-
30+
31+
```bash
32+
$ yarn add react-store-context-hooks
33+
# or
34+
$ npm install --save react-store-context-hooks
35+
```
36+
37+
API Reference
38+
-
39+
Provides various data store hooks that allow functional components within
40+
the same React Context to share the application state.
41+
42+
**Requires**: <code>module:react</code>
43+
44+
* [react-store-context-hooks](#module_react-store-context-hooks)
45+
* [.isEmpty(value)](#module_react-store-context-hooks.isEmpty) ⇒ <code>boolean</code>
46+
* [.useStore(key, defaultValue)](#module_react-store-context-hooks.useStore) ⇒ <code>Array.&lt;mixed, function(value): void, function(): void&gt;</code>
47+
* [.useStores()](#module_react-store-context-hooks.useStores) ⇒ <code>Object.&lt;{setStores: function(data): void}&gt;</code>
48+
* [.withStores(Component)](#module_react-store-context-hooks.withStores) ⇒ <code>React.ComponentType</code>
49+
50+
<a name="module_react-store-context-hooks.isEmpty"></a>
51+
52+
### react-store-context-hooks.isEmpty(value) ⇒ <code>boolean</code>
53+
A data store hook that allows a functional component to validate given value
54+
emptiness.
55+
56+
**Kind**: static method of [<code>react-store-context-hooks</code>](#module_react-store-context-hooks)
57+
**Returns**: <code>boolean</code> - Value emptiness flag.
58+
59+
| Param | Type | Description |
60+
| --- | --- | --- |
61+
| value | <code>mixed</code> | The value to be checked for emptiness. |
62+
63+
**Example**
64+
```js
65+
let flag = isEmpty('');
66+
// flag = true.
67+
flag = isEmpty('value');
68+
// flag = false.
69+
```
70+
<a name="module_react-store-context-hooks.useStore"></a>
71+
72+
### react-store-context-hooks.useStore(key, defaultValue) ⇒ <code>Array.&lt;mixed, function(value): void, function(): void&gt;</code>
73+
A data store hook that allows any components within the same React Context
74+
to share the application state.
75+
76+
**Kind**: static method of [<code>react-store-context-hooks</code>](#module_react-store-context-hooks)
77+
**Returns**: <code>Array.&lt;mixed, function(value): void, function(): void&gt;</code> - Store value, update, and remove callbacks.
78+
79+
| Param | Type | Description |
80+
| --- | --- | --- |
81+
| key | <code>string</code> | The store key. |
82+
| defaultValue | <code>mixed</code> | The store default value. |
83+
84+
**Example**
85+
```js
86+
const [store, setStore, delStore] = useStore('key', 'default');
87+
// store = 'default'.
88+
89+
setStore('value');
90+
// store = 'value'.
91+
92+
delStore();
93+
// store = 'default'.
94+
```
95+
<a name="module_react-store-context-hooks.useStores"></a>
96+
97+
### react-store-context-hooks.useStores() ⇒ <code>Object.&lt;{setStores: function(data): void}&gt;</code>
98+
A data store hook that allows a functional component to update multiple
99+
stores at once and share the application state with any components within
100+
the same React Context.
101+
102+
**Kind**: static method of [<code>react-store-context-hooks</code>](#module_react-store-context-hooks)
103+
**Returns**: <code>Object.&lt;{setStores: function(data): void}&gt;</code> - Multiple stores update callback.
104+
**Example**
105+
```js
106+
const [store1] = useStore('key1');
107+
const [store2] = useStore('key2');
108+
109+
const { setStores } = useStores();
110+
111+
setStore({
112+
key1: 'value1',
113+
key2: 'value2',
114+
});
115+
// store1 = 'value1'.
116+
// store2 = 'value2'.
117+
```
118+
<a name="module_react-store-context-hooks.withStores"></a>
119+
120+
### react-store-context-hooks.withStores(Component) ⇒ <code>React.ComponentType</code>
121+
A data store hook that wraps a component with a store context provider.
122+
123+
**Kind**: static method of [<code>react-store-context-hooks</code>](#module_react-store-context-hooks)
124+
**Returns**: <code>React.ComponentType</code> - The wrapped component with store provider.
125+
126+
| Param | Type | Description |
127+
| --- | --- | --- |
128+
| Component | <code>React.ComponentType</code> | The component to be wrapped with the store provider. |
129+
130+
**Example**
131+
```js
132+
const ComponentWithStore = withStore(Component);
133+
return <ComponentWithStore {...props} />;
134+
```
135+
136+
Development Dependencies
137+
-
138+
You will need to install [Node.js](https://bit.ly/2SMCGXK) as a local
139+
development dependency. The `npm` package manager comes bundled with all
140+
recent releases of `Node.js`. You can also use [yarn](https://bit.ly/3nmWS1K)
141+
as a package manager.
142+
143+
`yarn` or `npm install` will attempt to resolve any `npm` module dependencies
144+
that have been declared in the project’s `package.json` file, installing them
145+
into the `node_modules` folder.
146+
147+
```bash
148+
$ yarn
149+
# or
150+
$ npm install
151+
```
152+
153+
Run Benchmark, Flow, Leak, Lint, and Unit Tests
154+
-
155+
To make sure we did not break anything, let's run all the tests:
156+
157+
```bash
158+
$ yarn test
159+
# or
160+
$ npm run test:lint; npm run test:flow; npm run test:unit; npm run test:bench; npm run test:leak
161+
```
162+
163+
Run benchmark tests only:
164+
165+
```bash
166+
$ yarn test:bench
167+
# or
168+
$ npm run test:bench
169+
```
170+
171+
Run static type tests only:
172+
173+
```bash
174+
$ yarn test:flow
175+
# or
176+
$ npm run test:flow
177+
```
178+
179+
Run leak tests only:
180+
181+
```bash
182+
$ yarn test:leak
183+
# or
184+
$ npm run test:leak
185+
```
186+
187+
Run lint tests only:
188+
189+
```bash
190+
$ yarn test:lint
191+
# or
192+
$ npm run test:lint
193+
```
194+
195+
Run unit tests only:
196+
197+
```bash
198+
$ yarn test:unit
199+
# or
200+
$ npm run test:unit
201+
```
202+
203+
Run Budles, Documentation, and Typescript definition Builds
204+
-
205+
To generate distribution bundles, documentation, and Typescript definition, run:
206+
207+
```bash
208+
$ yarn build
209+
# or
210+
$ npm run build:docs; npm run build:bundles; npm run build:ts
211+
```
212+
213+
Run bundles build only:
214+
215+
```bash
216+
$ yarn build:bundles
217+
# or
218+
$ npm run build:bundles
219+
```
220+
221+
Run documentation build only:
222+
223+
```bash
224+
$ yarn build:docs
225+
# or
226+
$ npm run build:docs
227+
```
228+
229+
Run Typescript definition build only:
230+
231+
```bash
232+
$ yarn build:ts
233+
# or
234+
$ npm run build:ts
235+
```
236+
237+
Contributing
238+
-
239+
If you would like to contribute code to React Store Context Hooks repository,
240+
you can do so through GitHub by forking the repository and sending a pull request.
241+
242+
If you do not agree to [Contribution Agreement](CONTRIBUTING.md), do not
243+
contribute any code to React Store Context Hooks repository.
244+
245+
When submitting code, please make every effort to follow existing conventions
246+
and style in order to keep the code as readable as possible. Please also include
247+
appropriate test cases.
248+
249+
That's it! Thank you for your contribution!
250+
251+
License
252+
-
253+
Copyright (c) 2019 - 2021 Richard Huang.
254+
255+
This utility is free software, licensed under: [Mozilla Public License (MPL-2.0)](https://mzl.la/2vLmCye).
256+
257+
Documentation and other similar content are provided under [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](https://bit.ly/2SMCRlS).

0 commit comments

Comments
 (0)