1.0.0 • Published 3 years ago

utility-hooks v1.0.0

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

react hooks helpers

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

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

3 years ago

0.6.2

5 years ago

0.6.1

5 years ago

0.6.0

6 years ago

0.5.9

6 years ago

0.5.8

6 years ago

0.5.7

6 years ago

0.5.6

6 years ago

0.5.5

6 years ago

0.5.4

6 years ago

0.5.3

6 years ago

0.5.2

6 years ago

0.5.1

6 years ago

0.5.0

6 years ago

0.4.1

6 years ago

0.4.0

6 years ago

0.3.3

6 years ago

0.3.2

6 years ago

0.3.1

6 years ago

0.3.0

6 years ago

0.2.0

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago

0.0.1

6 years ago