Hi, I'm trying to type a create function that returns a fully typed component with ref forwarding and the as prop predefined.
This is needed when using a polymorphic component with CSS-in-JS libraries and other polymorphic components. I'm currently using a createInteractive function in React Interactive, see readme docs, and code.
Building off of your <Heading> example in the readme I have the following, which works but only because I'm using any. Also see this codesandbox which has the below code along with a few other attempts. Thanks!
function createHeadingWithRef<
T extends React.ElementType = typeof HeadingDefaultElement
>(as: T): React.ForwardRefExoticComponent<Omit<HeadingProps<T>, "as">> {
// without any get TS error on return type of WrappedHeading
const WrappedHeading: any = React.forwardRef(function <
T extends React.ElementType = typeof as
>(
props: PolymorphicPropsWithoutRef<HeadingOwnProps, T>,
ref: React.ForwardedRef<Element>
) {
return <Heading {...props} as={as} ref={ref} />;
});
return WrappedHeading;
}
Hi, I'm trying to type a
create
function that returns a fully typed component with ref forwarding and theas
prop predefined.This is needed when using a polymorphic component with CSS-in-JS libraries and other polymorphic components. I'm currently using a
createInteractive
function in React Interactive, see readme docs, and code.Building off of your
<Heading>
example in the readme I have the following, which works but only because I'm usingany
. Also see this codesandbox which has the below code along with a few other attempts. Thanks!