React compatibility mode

The React compatibility mode eases migration from reason-react to html_of_jsx. It adds camelCase aliases for HTML attributes that React uses instead of the standard HTML names.

Enable

Turn on -react in your ppx configuration.

(libraries html_of_jsx)
(preprocess (pps html_of_jsx.ppx -react))

Aliases

The -react flag adds the following aliases. The standard HTML attribute names still work.

JSX.render(
  <div className="card">
    <label htmlFor="email"> {JSX.string("Email")} </label>
    <input
      id="email"
      type_=`email
      tabIndex=1
      maxLength=100
      autoComplete="email"
      readOnly=true
    />
    <table>
      <tr> <td colSpan=2> {JSX.string("Full width")} </td> </tr>
    </table>
  </div>
)

JSX.render (
  <div className="card">
    <label htmlFor="email"> (JSX.string "Email") </label>
    <input
      id="email"
      type_=`email
      tabIndex=1
      maxLength=100
      autoComplete="email"
      readOnly=true
    />
    <table>
      <tr> <td colSpan=2> (JSX.string "Full width") </td> </tr>
    </table>
  </div>
)