@cutting/hooks - reusable react hooks for reusable things

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>
  );
};