kripod / kripod/react-polymorphic-types

Typing required props for `as`

Open
#7 5 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.