Neverending Plethora of Modules

    use-between
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    use-between

    npm version npm bundle size build status code coverage typescript supported

    When you want to separate your React hooks between several components it's can be very difficult, because all context data stored in React component function area. If you want to share some of state parts or control functions to another component your need pass It thought React component props. But If you want to share It with sibling one level components or a set of scattered components, you will be frustrated.

    useBetween hook is the solution to your problem 😚

    import React, { useState, useCallback } from 'react';
    import { useBetween } from 'use-between';
    
    const useCounter = () => {
      const [count, setCount] = useState(0);
      const inc = useCallback(() => setCount(c => c + 1), []);
      const dec = useCallback(() => setCount(c => c - 1), []);
      return {
        count,
        inc,
        dec
      };
    };
    
    const useSharedCounter = () => useBetween(useCounter);
    
    const Count = () => {
      const { count } = useSharedCounter();
      return <p>{count}</p>;
    };
    
    const Buttons = () => {
      const { inc, dec } = useSharedCounter();
      return (
        <>
          <button onClick={inc}>+</button>
          <button onClick={dec}>-</button>
        </>
      );
    };
    
    const App = () => (
      <>
        <Count />
        <Buttons />
        <Count />
        <Buttons />
      </>
    );
    
    export default App;

    Edit Counter with useBetween

    useBetween is a way to call any hook. But so that the state will not be stored in the React component. For the same hook, the result of the call will be the same. So we can call one hook in different components and work together on one state. When updating the shared state, each component using it will be updated too.

    If you like this idea and would like to use it, please put star in github. It will be your first contribution!

    Supported hooks

    + useState
    + useEffect
    + useReducer
    + useCallback
    + useMemo
    + useRef
    + useImperativeHandle

    If you found some bug or want to propose improvement please make an Issue or join to release discussion on Github. I would be happy for your help to make It better! 😉

    Install

    npm install use-between
    # or
    yarn add use-between

    Enjoy and happy coding!

    Install

    npm i use-between

    DownloadsWeekly Downloads

    2,414

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    22.8 kB

    Total Files

    8

    Last publish

    Collaborators

    • betula