https://github.com/wtnm/react-global-store-hook
https://github.com/wtnm/react-global-store-hook
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/wtnm/react-global-store-hook
- Owner: wtnm
- License: mit
- Created: 2021-08-09T09:20:01.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-03-14T20:12:31.000Z (over 2 years ago)
- Last Synced: 2024-03-14T21:32:35.304Z (over 2 years ago)
- Language: TypeScript
- Size: 152 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
## Overview
`react-global-store-hook` - global store based on react hooks
## Installation
To install the stable version:
```
npm install --save react-global-store-hook
```
## Quick example
```jsx
import GlobalStore from 'react-global-store-hook';
const store = new GlobalStore({ count: 0 });
setInterval(() => {
store.set('count', store.get('count') + 1);
}, 1000);
export function SecondsCounter() {
const count = store.useSubscribe('count');
return
{count};
}
const unsubscribe = store.subsctibe('count', (value) => console.log(value));
```
## Documentation
### GlobalStore(initialState: { [key: string]: any } = {})
```jsx
import GlobalStore from 'react-global-store-hook';
const store = new GlobalStore();
```
Store constructor. Can be initialized with initial state.
### GlobalStore methods
#### useSubscribe = (...paths: Array): any | any[] | { prev: any, current: any }
React hook to subscribe for store updates in react functional components.
If no arguments passed, then subscribes to all changes and returns value in format `{ prev: any, current: any }`.
If one argument passed returns single value in `path = paths[0]`.
Otherwise return tuple of values in each `path of paths`
Example:
```jsx
const store = new GlobalStore({ one: 1, two: { deep: 2 }, three: 3 });
export function Example() {
const deepTwo = store.useSubscribe(['two', 'deep']);
const [one, three] = store.useSubscribe('one', 'three');
return (
{deepTwo} {/* 2 */}
{one} {/* 1 */}
{three} {/* 3 */}
);
}
```
#### subscribe = (path: string | string[], subscriber: (value: any) => void): Function
Subscribes `subscriber` for store value updates in `path`. Returns function to unsubscribe
#### set = (path: string | string[], value: any): void
Set new `value` in store `path`
#### get = (path: string | string[]): any
Get `value` in store `path`
#### keys(): string[]
Returns all store keys