makeProps equivalent patterns in JSX4

1

I used to use makeProps to extend Base components and pass default values, for example
playground link

module Base = {
  @react.component
  let make = (
    ~setValue: (string => string) => unit,
    ~value: string,
    ~autocomplete: option<string>=?,
    ~type_: option<string>=?,
  ) => {
    ""
  }
}

// exported so that consumers of the file don't need to specify
// <Input.Base .../> but can use <Input/> directly
let make = Base.make
let makeProps = Base.makeProps

module Email = {
  let make = make
  let makeProps = makeProps(~autocomplete="email")
}
module Password = {
  let make = make
  let makeProps = makeProps(~type_="password")
}

let setValue = (fn) => {}
let value = "fake-value"
let email = <Email setValue value/>
let password = <Password setValue value/>
let otherField = <Base setValue value/>

let okay = <Base setValue value type_="number"/>
let error = <Password setValue value type_="number"/>

with the new JSX that removes makeProps, what is an equivalent way to achieve the same - extend and partially apply props, without the need to redefine them multiple times?

2

I would love to know the answer as well, I’ve been having trouble trying to figure out how to do something similar.

3

In such cases I just do:

include Base
4

If I’m understanding what you’re after correctly, you can wrap it with a function setting defaults:

module Base = {
  @react.component
  let make = (
    ~setValue: (string => string) => unit,
    ~value: string,
    ~autocomplete: option<string>=?,
    ~type_: option<string>=?,
  ) => {
    React.string("")
  }
}

// exported so that consumers of the file don't need to specify
// <Input.Base .../> but can use <Input/> directly
let make = Base.make

module Email = {
  let make = props => make({...props, autocomplete: "email"})
}
module Password = {
  let make = props => make({...props, type_: "password"})
}

let setValue = fn => {
  Js.log(fn)
}
let value = "fake-value"
let email = <Email setValue value />
let password = <Password setValue value />
let otherField = <Base setValue value />

let okay = <Base setValue value type_="number" />
let error = <Password setValue value type_="number" />

Playground: ReScript Playground