Flow-like render types?

1

Flow recently added a type system feature which allows to restrict children by component type called Render Types


component Header(size: string, color: string, message: string) {
  return <h1 style={{color}}>{message}</h1>;
}

component Layout(header: renders Header) {
  return <div>{header}</div>;
}

Does rescript type system allows that already?

2

Jsx components don’t necessarily return a react element in rescript, so you can definitely do it, just make it return some type you want and have your other component expect this type as a parameter.

1 Like
3

hmm I actually tried and it’s pretty cumbersome to redefine the return type of a JSX element in practice because mixing the return types of those JSX elements between custom and regular Jsx.element becomes a pain, I’d recommend to just use a regular a function here see playground:

module Header = {
  type t
  external fromElement: React.element => t = "%identity"
  external toElement: t => React.element = "%identity"
}

let s = React.string

module H1 = {
  let make = (~text: string) => {
    {<h1> {s(text)} </h1>}->Header.fromElement
  }
}

module Layout = {
  @react.component
  let make = (~children: Header.t) => <div> {children->Header.toElement} </div>
}

@react.component
let make = () => {
  <Layout> {H1.make(~text="hello")} </Layout>
}

There’s some work ongoing around making React components abstract, it could potentially allow this I think.