'Dynamically extending JSX.IntrinsicElements with custom props
I'm developing a small library which wraps around react and adds some custom props to tthe existing react native ones.
So it should create components with the types of the predefined CustomProps and these correspondig to the provided type combined.
type CustomProps = {
foo?: boolean,
};
const Anchor = factory<CustomProps>({
type: 'a',
});
In this example, auto completion should suggest foo alongside href, rel and so on.
This is what I've came up with:
type TypeList = keyof JSX.IntrinsicElements;
type Factory = <Props, Type extends TypeList = TypeList>(
{type}: Config<Props, Type>,
) => ForwardRefExoticComponent<JSX.IntrinsicElements[Type] & PropsWithChildren<Props>>;
type Config<Props, Type> = {
type?: Type,
}
Technically speaking, it does work as intended, but JSX.IntrinsicElements[Type] in combination with PropsWithChildren<Props> creates absurdly big type definitions for some types like button or div.
rendering my IDE unresponsive sometimes.
Is there a way to optimize this?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
