In React something I often do when creating a component library is something like this:
type Props = {
icon: JSXElementConstructor<{ className?: string }>
}
const SomeComponent = ({ icon: Icon }) => {
return <div>An icon: <Icon className="set-by-parent" />;
};
...
import { Check } from "some-icon-library";
<SomeComponent icon={Check} />
With the idea being that the user can pass in any component constructor and all the right props will be set automatically by the parent.
I’m having some trouble figuring out how to do this in ReScript (or if it’s possible). I realize the types are stricter so instead of accepting any constructor that takes className as a prop, I’m trying to set up a component that takes more a more specific set of props. This is what I have so far:
// Lucide.res
module Props = {
type t = {
size?: int,
color?: string,
strokeWidth?: int,
absoluteStrokeWidth?: bool,
className?: string,
}
}
module Check = {
@module("lucide-react") @react.component(: Props.t)
external make: unit => React.element = "Check"
}
And what I want to do is something like this:
// IconButton.res
@react.component
let make (~icon) => {
<button>
<icon size={16} color="white" /> // This is the prop
</button>
}
This feels like it should be possible, but maybe I’m mistaken. Thanks!