Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/use-global-hook/use-global-hook
https://github.com/use-global-hook/use-global-hook
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/use-global-hook/use-global-hook
- Owner: use-global-hook
- License: mit
- Created: 2019-04-03T15:28:31.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-05T10:12:33.000Z (almost 2 years ago)
- Last Synced: 2024-09-08T12:07:57.924Z (4 months ago)
- Language: JavaScript
- Size: 170 KB
- Stars: 653
- Watchers: 18
- Forks: 59
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-github-star - use-global-hook - global-hook | 650 | (JavaScript)
README
# use-global-hook
Easy state management for react using hooks in less than 1kb.
------------
Table of Contents
* [Install](#install)
* [Example](#minimal-example)
* [Complete Examples](#complete-examples)
* [Using TypeScript](#using-typescript)
### Install:
```sh
npm i use-global-hook
```
or
```sh
yarn add use-global-hook
```
### Minimal example:
```jsx
import React from 'react';
import globalHook from 'use-global-hook';
const initialState = {
counter: 0,
};
const actions = {
addToCounter: (store, amount) => {
const newCounterValue = store.state.counter + amount;
store.setState({ counter: newCounterValue });
},
};
const useGlobal = globalHook(initialState, actions);
const App = () => {
const [globalState, globalActions] = useGlobal();
return (
counter:
{globalState.counter}
globalActions.addToCounter(1)}>
+1 to global
);
};
export default App;
```
> Note: if "useGlobal" returns an object from state then any update of the object properties will also lead to re-render for consumers of the entire object.
------------
### Complete examples:
#### [Several counters, one value](https://codesandbox.io/s/v6zz2nwow5 "CodeSandBox")
Add as many counters as you want, it will all share the same global value.
Every time one counter add 1 to the global value, all counters will render.
The parent component won't render again.
------------
#### [Asynchronous ajax requests](https://codesandbox.io/s/wqvykj5497 "CodeSandBox")
Search GitHub repos by username.
Handle the ajax request asynchronously with async/await.
Update the requests counter on every search.
------------
#### [Avoid unnecessary renders](https://codesandbox.io/s/several-counters-pdbsy "CodeSandBox")
Map a subset of the global state before use it.
The component will only re-render if the subset is updated.
------------
#### [Connecting to a class component](https://codesandbox.io/s/connect-a-class-component-rgbf1 "CodeSandBox")
Hooks can't be used inside a class component.
We can create a Higher-Order Component that connects any class component with the state.
With the connect() function, state and actions become props of the component.
------------
#### [Immutable state with Immer.js integration](https://codesandbox.io/s/immer-integration-e1hpj "CodeSandBox")
Add Immer.js lib on your hook options to manage complex immutable states.
Mutate a state draft inside a setState function.
Immer will calculate the state diff and create a new immutable state object.
------------
### Using TypeScript
Install the TypeScript definitions from DefinitelyTyped
```
npm install @types/use-global-hook
```
Example implementation
```typescript
import globalHook, { Store } from 'use-global-hook';
// Defining your own state and associated actions is required
type MyState = {
value: string;
};
// Associated actions are what's expected to be returned from globalHook
type MyAssociatedActions = {
setValue: (value: string) => void;
otherAction: (other: boolean) => void;
};
// setValue will be returned by globalHook as setValue.bind(null, store)
// This is one reason we have to declare a separate associated actions type
const setValue = (
store: Store,
value: string
) => {
store.setState({ ...store.state, value });
store.actions.otherAction(true);
};
const otherAction = (
store: Store,
other: boolean
) => { /* cool stuff */ };
const initialState: MyState = {
value: "myString"
};
// actions passed to globalHook do not need to be typed
const actions = {
setValue,
otherAction
};
const useGlobal = globalHook(
initialState,
actions
);
// Usage
const [state, actions] = useGlobal();
// Subset
const [value, setValue] = useGlobal void>(
(state: MyState) => state.value,
(actions: MyAssociatedActions) => actions.setValue
);
// Without declaring type, useGlobal will return unknown
const [state, actions] = useGlobal(); // returns [unknown, unknown]
// Happy TypeScripting!
```