Need help with use-global-hook?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

use-global-hook
603 Stars 53 Forks MIT License 57 Commits 22 Opened issues

Services available

!
?

Need anything else?

Contributors list

use-global-hook

Easy state management for react using hooks in less than 1kb.


Table of Contents * Install * Example * Complete Examples * Using TypeScript

Install:

npm i use-global-hook

or

yarn add use-global-hook

Minimal example:

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(React, initialState, actions);

const App = () => { const [globalState, globalActions] = useGlobal(); return (

counter: {globalState.counter}

globalActions.addToCounter(1)}> +1 to global
); };

export default App;


Complete examples:

Several counters, one value

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

Search GitHub repos by username. Handle the ajax request asynchronously with async/await. Update the requests counter on every search.


Avoid unnecessary renders

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

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

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( React, 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! ```

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.