Skip to content

Utils

useMergeRefs

Merges an array of refs, returning a memoized callback ref or nullnull.

import {useMergeRefs} from '@floating-ui/react';
 
function App() {
  const ref = useMergeRefs([ref1, ref2, ref3]);
  return <div ref={ref} />;
}
import {useMergeRefs} from '@floating-ui/react';
 
function App() {
  const ref = useMergeRefs([ref1, ref2, ref3]);
  return <div ref={ref} />;
}

useId

Uses React 18’s built-in useId()useId() when available, or falls back to a slightly less performant (requiring a double render) implementation for earlier React versions.

import {useId} from '@floating-ui/react';
 
function App() {
  const id = useId();
}
import {useId} from '@floating-ui/react';
 
function App() {
  const id = useId();
}