useMergedRef

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.

Parameters

refs

TypeArray<React ref> (required)

Array of React refs to merge into one.

Returns

Examples

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

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