react-shared-hook

    0.0.4 • Public • Published

    react-shared-hook

    A simple way to create shared state using the hook API from React.

    Use-case: A library or module that serves the same state to mulitple components when it's not practical to add a provider.

    This works for react hooks of the form

    [state, setter] = hook(initialValue)

    For example, this could be useState, useReducer, etc.

    Inspired by https://github.com/philippguertler/react-hook-shared-state

    Requires at least React 16.7.0

    Install

    yarn add react-shared-hook

    Example

    import { useState } from 'react'
    import createSharedHook from 'react-shared-hook'
    
    const [useSharedHook, setter] = createSharedHook(useState, 'initial state')
    
    /*
     * The state of every component will be assigned the same value.
     */
    const MyComponent = () => {
      const state = useSharedHook()
      return (
        <div
          onClick={() => setter(state => state.replace('initial', 'new'))}
        >
          {state}
        </div>
      )
    }

    API

    createSharedState(initialValue)

    Returns a tuple with two functions in this order:

    • useSharedState() - Use this in your component. This will return the current state and cause your component to rerender when a new state is set.
    • setSharedState(nextState | (previousState) => nextState) - Call this function to set the new shared state. You can also pass a function which will receive the previous state as a parameter and returns the next state.

    Install

    npm i react-shared-hook

    DownloadsWeekly Downloads

    2

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    5.02 kB

    Total Files

    8

    Last publish

    Collaborators

    • bebbi