Created at 302 days ago

ElementRef

The ElementRef type helper allows you to easily extract the type from the element you're targeting when using the useRef hook. It works with both standard HTML elements and custom components that use forwardRef.

// standard HTML elements
const Component = () => {
  const audioRef = useRef<ElementRef<'audio'>>()

  return <audio ref={audioRef}>Hello</audio>
}

// custom components
type OtherComponentRef = ElementRef<typeof OtherComponent>

const Component = () => {
  const ref = useRef<OtherComponentRef>()

  return <OtherComponent ref={ref}>Hello</OtherComponent>
}