Obtaining the correct props from a JSX.Element is described as nearly impossible in this situation. To achieve the desired design, it is recommended to pass the element name and props as separate arguments instead of passing an entire JSX.Element.
This piece of code can handle an element name such as 'button' or any React component. It generates a function component with identical props. The returned component retains all props as it appears that the purpose is setting defaults rather than eliminating requirements.
import React, { ComponentType, ComponentProps } from "react";
const wrapElement = <
C extends keyof JSX.IntrinsicElements | ComponentType<any>
>(
Component: C,
presetProps: Partial<ComponentProps<C>>
) => (props: ComponentProps<C>) => {
const merged: ComponentProps<C> = { ...presetProps, ...props };
return <Component {...merged} />;
};
const Btn = wrapElement("button", {
className: "[A LOT OF TAILWIND UTILITY CLASSES]"
});
const Dbl = wrapElement(Btn, { onClick: () => alert("clicked") });
const Test = () => {
return <Dbl>Click</Dbl>;
};
Typescript Playground Link
Consider customizing the merging behavior to blend className or style properties together rather than overriding them entirely.
Note: When attempting to merge props inline like
<Component {...presetProps} {...props} />
, an error was encountered stating "Type
Partial<ComponentProps<C>> & ComponentProps<C>
is not assignable to type
IntrinsicAttributes & LibraryManagedAttributes<C, any>
." This explains why the props are merged on a separate line and the type is explicitly annotated as
ComponentProps<C> instead of the inferred type
Partial<ComponentProps<C>> & ComponentProps<C>
.