kripod / kripod/react-polymorphic-types

Passing a generic component to `as` fails

Open
#15 2 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

I've got a polymorphic button component that looks like this:

```tsx
import type {PolymorphicPropsWithoutRef} from 'react-polymorphic-types';

const defaultElement = 'button';

type ButtonOwnProps = {
color?: string;
};

type ButtonProps =
PolymorphicPropsWithoutRef;

function Button({
as,
color,
...rest
}: ButtonProps) {
const Element: React.ElementType = as || defaultElement;
return ;
}
```

Simple cases work:

```tsx
// ✅ Works

Two
;
```

… but when I pass a component to the `as` prop that is itself generic, I get an error.

```tsx
function Test({test}: {test: Name}) {
return <>{test};
}

// ❌ Fails

One
;
```

```
Type '{ children: string; as: ({ test }: { test: Name; }) => Element; color: string; test: "two"; }' is not assignable to type 'IntrinsicAttributes & Omit<{ test: "one" | "two"; }, "as" | "color"> & ButtonOwnProps & { as?: (({ test }: { test: Name; }) => Element) | undefined; }'.
Property 'children' does not exist on type 'IntrinsicAttributes & Omit<{ test: "one" | "two"; }, "as" | "color"> & ButtonOwnProps & { as?: (({ test }: { test: Name; }) => Element) | undefined; }'.ts(2322)
```

Can you provide some help for this use case @kripod? Thank you very much!

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the inline Button and generic Test reproduction in the issue and type-check the failing JSX example. Trace the polymorphic prop type used by Button, then verify that passing a generic component accepts its test prop and children without the reported TypeScript error.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
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.