5
How to properly type dynamic React props in TypeScript?
I am building a reusable Card component that can render as an a tag, a button tag, or a custom Next.js Link based on an as prop. I am struggling to get the TypeScript typing correct so that standard attributes (like href for links, type for buttons) are auto-completed and typesafe. Can someone show me a clean way to achieve this?
Q&A Help Desk#React#TypeScript
5
Recommended Learning & Resources
2 Answers
Accepted Solution
2
You should look into Polymorphic Components pattern. Here is a clean boilerplate using TypeScript generics:
type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
type PolymorphicProps<C extends React.ElementType, Props = {}> = {
as?: C;
} & Props & Omit<React.ComponentPropsWithoutRef<C>, keyof Props>;
This is how I type all my design system cards and buttons!
2
Accepted
2
Wow Jane, this is incredibly clean! The Omit utility is exactly what I was missing. It works perfectly with custom Router links too. Thank you so much!
2
Post Your Answer
Use ``` code ``` for syntax highlighting