Search⌘ K
AI Features

The PolymorphicRef Type

Explore the PolymorphicRef type to correctly type ref props in polymorphic React components. Learn to use React.ComponentPropsWithRef and type indexing to ensure accurate ref types based on the as prop, enabling strong typing and ref support in reusable components.

Let’s now turn our attention to the PolymorphicRef type. If we must support refs in our polymorphic component implementation, then we need to type the ref prop correctly.

The ComponentPropsWithRef type

So, how can we get the type of ref object passed to the rendered component, based on the as prop? The answer is by leveraging the React.ComponentPropsWithRef ...