Merges multiple React refs into one to use on an element.

Useful when a component allows a consumer to sometimes provide a ref for an element via React.forwardRef, but internally the component needs to define it’s own ref for the same element. It’s used by many of the form components.



TypeArray<React ref> (required)

Array of React refs to merge into one.



How to import.
import useMergedRef from "device-agnostic-ui/useMergedRef.mjs";
How to create a custom input component that allows consumers to provide their own ref, while using the useCustomValidity hook.
import useCustomValidity from "device-agnostic-ui/useCustomValidity.mjs";
import useMergedRef from "device-agnostic-ui/useMergedRef.mjs";
import React from "react";

const Input = React.forwardRef(({ validationMessage, ...props }, ref) => {
  const mergedRef = useMergedRef([ref]);
  useCustomValidity(mergedRef, validationMessage);
  return <input {...props} ref={mergedRef} />;