Various React related utility functions and libs used by nrkno-sanity.
npm install @nrk/nrkno-sanity-react-utilsVarious React related utility functions and libs used by nrkno-sanity.
npm install --save @nrk/nrkno-sanity-react-utils
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.
``tsx`
function SomeComponent(props: any, forwardRef: ForwardedRef
const ref = useRef
const setRefs = useSetRefs(ref, forwardRef);
return ;
}
Get a callback whenever an observed element changes size.
`tsx
function SomeComponent() {
//useState and NOT useRef
const [ref, setRef] = useState
const onResize= useCallback((domRect: DOMRect) => {
// invoked whenever the div is resized
}, [])
useResizeObserver(onResize, ref);
return
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.
ts
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;
}
``