kripod / kripod/react-polymorphic-types
Typing required props for `as`
- Dominant language
- No language data
- Stars
- 197
- Forks
- 9
- PR merge metrics
- No merged PRs in 30d
Description
Hi, is it possible to type the props that `as` is required to accept? Without this it is easy to pass in an `as` prop that is not compatible with the polymorphic component. Thanks.
Using the heading example in the readme (also see [this codesandbox](https://codesandbox.io/s/polymorphic-types-required-props-for-as-y0bm8?file=/src/App.tsx) for a live reproduction):
```ts
// Heading from readme:
function Heading<
T extends React.ElementType = typeof HeadingDefaultElement
>({ as, color, style, ...restProps }: HeadingProps) {
const Element: React.ElementType = as || HeadingDefaultElement;
return ;
}
const MyHeading: React.FC<{}> = ({ children }) =>
{children}
;function App() {
return (
<>
This should result in a type error because MyHeading doesn't accept a style prop,
but typescript thinks it's fine even though it doesn't work.
{/* this errors because MyHeading doesn't accept a style prop
MyHeading
*/}
);
}
```
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the Heading example in the README and the linked CodeSandbox reproduction. Check how HeadingProps derives props for the as component, then verify that passing a component without a style prop produces a TypeScript error while compatible components still type-check.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100