Interop

Interop.ml

module R = Reaml

module Counter = struct
  type props = { initial : int }

  external make : props Reaml.component = "Counter"
    [@@bs.module "./Interop.js"] [@@reaml.component]
end

let main =
  R.div []
    [
      Counter.make { initial = -3 };
      Counter.make { initial = 0 };
      Counter.make { initial = 3 };
    ]

let () = main |> R.renderTo "main"

Interop.js

import React from 'react';
import { createElement as h } from 'react';

export const Counter = ({ initial }) => {
  const [count, setCount] = React.useState(initial);
  return h(
    'div',
    {},
    h('button', { onClick: () => setCount(count - 1) }, '-'),
    ` ${count} `,
    h('button', { onClick: () => setCount(count + 1) }, '+'),
  );
};