use-merged-ref

Use multiple refs for one dom node

Import

Source

View source code

Docs

Edit this page

Package

@mantine/hooks

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 React, { 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>();