react hooks helpers

A collection of utility hooks to problems I've solved over the years.

• useAsyncScript
• useBreakpoint
• useComposedRefs
• useControlledReducer
• useOutsideClick
• usePrevious
• useRect
• useSubscription
• useWindowWidth

useAsyncScript

• A stateful hook for asynchronously loading 3rd party scripts in the browser. For example reCAPTCHA or google maps.

Example:

const url = 'https://example.com/?default=true';

export function AsyncScriptExample(): JSX.Element | null {
  const { loading, done } = useAsyncScript(url);

  if (loading) {
    return <>Loading...</>;
  }

  if (done) {
    return <>Script complete</>;
  }

  if (error) {
    return <>Script errored</>;
  }

  return null;
}

useBreakpoint

• A hook that returns the current breakpoint according to the browser's window size.

Example:

export function BreakpointExample(){
  const breakpoint = useBreakpoint();

  return (
    <div>
      <div>{`Current breakpoint is: ${breakpoint}`}</div>
    </div>
  );
}

useComposedRefs

• A hook to combine multiple instances of a ref into 1 instance to pass to an element.

Example:

const ForwardedRefComponent = forwardRef<HTMLElement, PropsWithChildren<{}>>(
  (props, forwardedRef) => {
    const internalRef = useRef<HTMLDivElement | null>(null);
    const ref = useComposedRefs(internalRef, forwardedRef);

    return (
      <div ref={ref}>
        {props.children}
      </div>
    );
  }
);

useControlledReducer

TODO

useOutsideClick

• A hook that will execute a callback when a click occurs outside of an element.

Example:

function OutsideClickExample(){
  const callback = (): void => {
    alert('Clicked outside of the button');
  };
  const ref = useOutsideClick(callback);

  return (
      <button ref={ref}>Click outside of me</button>
  );
}

usePrevious

• A hook that will keep track of the previous state of a stateful value.

Example:

export function PreviousStateExample() {
  const [count, setCount] = useState(0);
  const previousState = usePrevious(count);

  function increaseCount() {
    setCount(prevState => prevState + 1);
  }

  function decreaseCount() {
    setCount(prevState => {
      const nextState = prevState - 1;
      return nextState < 0 ? 0 : nextState;
    });
  }

  return (
    <div>
      <button onClick={increaseCount}>Increase</button>
      <button onClick={decreaseCount}>Decrease</button>

      <div>
        {`Counter: ${count}`}
        
        <div>{`Previous count: ${previousState}`}</div>
      </div>
    </div>
  );
}

useRect

• A hook that returns the current DOMRect measurements for a DOM element

Example:

function DOMRectExample(){
  const ref = useRef<HTMLDivElement | null>(null);
  const rect = useRect(ref);

  console.log(rect);

  return (
    <div ref={ref}>
      My DOMRect will be tracked
    </div>
  )
}

useSubscription

TODO

useWindowWidth

• A hook that returns the current width of the browser window.

Example:

export function WindowWidthExample() {
  const width = useWindowWidth();

  return <div>{`Window's width is ${width}px`}</div>;
}