use-merged-ref

Usage

use-merged-ref accepts any number of refs and returns a function that should be passed to the ref prop. Use this hook when you need to use more than one ref on a 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} />;
}

mergeRefs function

use-merged-ref hooks memoizes refs with useCallback hook, but in some cases memoizing is not a valid strategy, for example, when you are working with a list of dynamic components React will complain that different number of hooks was called across two renders. To fix that issue, use mergeRefs function instead:

import { useRef } from 'react';
import { useClickOutside, mergeRefs } from '@mantine/hooks';

function Demo() {
  const myRef = useRef();
  const useClickOutsideRef = useClickOutside(() => {});
  const mergedRef = mergeRefs(myRef, useClickOutsideRef);
  return <div ref={mergedRef} />;
}

mergeRefs works the same way as use-merged-ref, but does not use hooks internally. Use it only when you cannot use use-merged-ref. Note that mergeRefs will not work correctly with use-focus-trap hook, you are required to use use-merged-ref with it.

Definition

function useMergedRef<T = any>(...refs: React.ForwardedRef<T>[]): (node: T) => void;

Set node type

useMergedRef<HTMLDivElement>();