@nrk/nrkno-sanity-react-utils

Various React related utility functions and libs used by nrkno-sanity.

Installation

npm install --save @nrk/nrkno-sanity-react-utils

Usage

useSetRefs

Callback that sets all provided refs. Useful when you need multiple reference handles to the same component.

For instance, a ref for your local state and for forwarded Sanity ref in custom input component.

function SomeComponent(props: any, forwardRef: ForwardedRef<HTMLDivElement>) {
  const ref = useRef<HTMLDivElement | null>(null)
  const setRefs = useSetRefs(ref, forwardRef);
  return <div ref={setRefs} />;
}

useResizeObserver

Get a callback whenever an observed element changes size.

function SomeComponent() {
 //useState and NOT useRef
  const [ref, setRef] = useState<HTMLDivElement | null>(null);

  const onResize= useCallback((domRect: DOMRect) => {
      // invoked whenever the div is resized
    }, [])
    
  useResizeObserver(onResize, ref);
  return <div ref={setRef} />;
}

useDebouncedEffect

Takes an effect callback and dependency array (same arguments as React.useEffect), and a debounce delay.

When dependencies change (including component mount, ala useEffect), the effect will be invoked after milliseconds.

The effect is debounced: Delay restarts whenever dependencies change, and only the last change to dependencies will be used.

function SomeComponent({prop}: {prop: string}) {
    useDebouncedEffect(() => {
        // delays invoking this func until after 500 milliseconds have elapsed 
        // since the last time dependencies changed
    }, [prop], 500)
    return null;
}