Original material-ui library is really flexible in what props it can apply and doesn't go well with such strictly typed language. Even more, they change their api so quickly right now. To play around that, we can have each component to have special prop, that will be included in props directly.
Any inherited, spreadable props can go here, and rarely used props, such as onClick on Typography or tabIndex.
That way we can type better main interface of the component and not worry about some things, that stringly typed anyway.
Here is an example
/* Definition */
module Button = {
[@bs.module "material-ui/Button"]
external reactClass : ReasonReact.reactClass = "default";
let make =
(
/* good strictly typed main interface */
~onClick: option((ReactEventRe.Mouse.t => unit))=?,
/* put here whatever you want to apply directly */
~unsafeProps=Js.Obj.empty(),
children
) =>
ReasonReact.wrapJsForReason(
~reactClass,
~props=Js.Obj.assign(unsafeProps, {
"onClick": from_opt(onClick)
}),
children
);
};
/* Usage */
let x =
<Button
onClick=Js.log2("Hello world")
unsafeProps={"autofocus": Js.true_} />
Original material-ui library is really flexible in what props it can apply and doesn't go well with such strictly typed language. Even more, they change their api so quickly right now. To play around that, we can have each component to have special prop, that will be included in props directly.
Any inherited, spreadable props can go here, and rarely used props, such as onClick on Typography or tabIndex.
That way we can type better main interface of the component and not worry about some things, that stringly typed anyway.
Here is an example