Bs bind for JS object, specially for callback object arguments.

Antd_Steps.re

/* Bind for https://ant.design/components/steps/ */

[%bs.raw {|require("antd/lib/steps/style")|}];

type dotOptions = {
  .
  "index": int,
  "status": string,
  "title": string,
  "description": string,
};

[@bs.deriving abstract]
type jsProps = {
  current: int,
  direction: string,
  [@bs.optional]
  progressDot:
    (ReasonReact.reactElement, dotOptions) => ReasonReact.reactElement,
  size: string,
  status: string,
};

[@bs.module "antd/lib/steps"]
external reactClass : ReasonReact.reactClass = "default";

let make =
    (
      ~current=0,
      ~direction="horizontal",
      ~progressDot=?,
      ~size="default",
      ~status="process",
      children,
    ) =>
  ReasonReact.wrapJsForReason(
    ~reactClass,
    ~props=jsProps(~current, ~direction, ~progressDot?, ~size, ~status, ()),
    children,
  );

module Step = {
  [@bs.deriving abstract]
  type jsProps = {
    [@bs.optional]
    description: string,
    [@bs.optional]
    icon: string,
    [@bs.optional]
    title: string,
    status: string,
  };

  [@bs.module "antd/lib/steps"]
  external reactClass : ReasonReact.reactClass = "Step";

  let make = (~description=?, ~icon=?, ~title=?, ~status="wait", children) =>
    ReasonReact.wrapJsForReason(
      ~reactClass,
      ~props=jsProps(~description?, ~icon?, ~title?, ~status, ()),
      children,
    );
};

Usage.re

/* Simplify component definition */

let customDot = (dot, options) => {
  Js.log2("options", options);
  Js.log2("title", options##title);
  dot;
};

<Steps current=1 progressDot=customDot>
 <Step
   title="Finished"
   description="You can hover on the dot."
 />
 <Step
   title="In Progress"
   description="You can hover on the dot."
 />
 <Step
   title="Waiting"
   description="You can hover on the dot."
 />
 <Step
   title="Waiting"
   description="You can hover on the dot."
 />
</Steps>