use-merged-ref

Use multiple refs for one dom node
Import

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>();
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback