react-hookie-store
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.7 • Public • Published

    React Hookie Store

    1 step to build your public state module with your custom hook.

    Usage

    step 1

    wrap your app with Store.

    // index.tsx
    import Store from 'react-hookie-store';
     
    ReactDOM.render( <Store> <App /> </Store>, document.getElementById('app'));

    step 2

    use Store when exporting your custom hook.

    // use-userinfo.ts
    import Store from 'react-hookie-store';
     
    function UserInfo () {
      const [userinfo, update] = useState({ name: 'Alice' });
      return {
        userinfo,
        update 
      };
    }
    // use here.
    export default Store.use(UserInfo);

    Everything is Done!

    example

    Just use your custom hook in normal way. Only one state instance will be created when it is used in two different components.

    import useUserInfo from './use-userinfo.ts'
     
    // A.tsx
    function Userpanel () {
      const { userinfo } = useUserInfo();
      return (
        <div>{userinfo.name}</div>
      }
    }
     
    // B.tsx
    function Avatar () {
      const { userinfo } = useUserInfo();
      return (
        <div>{userinfo.name}</div>
      }
    }

    other features

    1. If your component only use its exported function, your component will not be rendered when the state changes.
    // A.tsx
    // Only use the update method. Because the component doesn't watch the change of userinfo state, it should not be re-rendered when state state changes.
    function Userpanel () {
      const { update } = useUserInfo();
      useEffect(() => update({ name: 'Ben' }))
      return (
        <div>Hello World</div>
      }
    }
     
    // B.tsx
    // Use the userinfo state. Component will re-render when the state changes.
    function Avatar () {
      const { userinfo } = useUserInfo();
      return (
        <div>{userinfo.name}</div>
      }
    }
    1. If your component does not need any state or method of the custom hook, it just want to be re-rendered when the state is changed. Just observe it.
    // C.tsx
    // Component will re-render when the userinfo state changes.
    function SomebodyWillTakeCareOfMe () {
      useUserInfo.observe();
      return (
        <div>Yeah</div>
      }
    }

    Install

    npm i react-hookie-store

    DownloadsWeekly Downloads

    0

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    7.34 kB

    Total Files

    5

    Last publish

    Collaborators

    • pathen