Nocturnal Pumpkin Maelstrom

    @cutting/hooks
    TypeScript icon, indicating that this package has built-in type declarations

    4.52.0 • Public • Published

    @cutting/hooks - reusable react hooks for reusable things

    npm version code style: prettier

    install

    pnpm add @cutting/hooks
    
    # or
    
    npm install @cutting/hooks

    This package contains the following hooks:

    useIsMounted

    A React hook to let you know whether the component running the hook is still mounted.

    usage

    import { useIsMounted } from '../useIsMounted/useIsMounted';
    
    const MyComp(): JSX.Element {
      const isMounted = useIsMounted();
    
       if (isMounted) {
        debouncedCallback(newSize);
      }
    
      // etc.
    }

    useScrollToTop

    A React hook to bump the focus to the top of the viewport or to an optional ref

    usage

    import { useScrollToTop } from '@cutting/hooks';
    
    const MyComp(): JSX.Element {
      const root = useRef<HTMLDivElement>(null);
    
      useScrollToTop({ ref: root });
    
      // etc.
    }

    usePrevious

    usage

    import {usePrevious} from '@cutting/hooks';
    
    const Demo = () => {
      const [count, setCount] = React.useState(0);
      const prevCount = usePrevious(count);
    
      return (
        <p>
          <button onClick={() => setCount(count + 1)}>+</button>
          <button onClick={() => setCount(count - 1)}>-</button>
          <p>
            Now: {count}, before: {prevCount}
          </p>
        </p>
      );
    };

    Install

    npm i @cutting/hooks

    DownloadsWeekly Downloads

    946

    Version

    4.52.0

    License

    MIT

    Unpacked Size

    31.9 kB

    Total Files

    23

    Last publish

    Collaborators

    • cutting