use-merged-ref
Use multiple refs for one dom node
Import
Source
Docs
Package
Usage
Hook accepts any amount of refs and returns function that should be passed to dom node. Use hook when you need to use more than one ref on single dom node, for example, when you want to use use-click-outside and use-focus-trap hooks and also get a ref for yourself:
import { useRef } from 'react';import { useClickOutside, useFocusTrap, useMergedRef } from '@mantine/hooks';function Demo() {const myRef = useRef();const useClickOutsideRef = useClickOutside(() => {});const focusTrapRef = useFocusTrap();const mergedRef = useMergedRef(myRef, useClickOutsideRef, focusTrapRef);return <div ref={mergedRef} />;}
TypeScript
Definition
function useMergedRef<T = any>(...refs: React.ForwardedRef<T>[]): (node: T) => void;
Set node type
useMergedRef<HTMLDivElement>();
Built by Vitaly Rtishchev and these awesome people