App.re

[%bs.raw {|require("bootstrap/dist/css/bootstrap.min.css")|}];

type complex = {
  value: string,
  className: string
};

module BtnColorContext =
  Context.MakePair({
    type t = complex;
    let defaultValue = {value: "Hello", className: "btn btn-danger"}
  });

module ThemedButton = {
  let component = "ThemedButton" |> ReasonReact.statelessComponent;

  let make = _children => {
    ...component,
    render: _self =>
      <BtnColorContext.Consumer>
        ...{context =>
          <button className={context.className}>
            {ReasonReact.stringToElement(context.value)}
          </button>}
      </BtnColorContext.Consumer>
  };
};

module Button = {
  let component = "Button" |> ReasonReact.statelessComponent;

  let make = _children => {
    ...component,
    render: _self =>
      <div className="container">
        <ThemedButton />
      </div>,
  };
};

let component = "App" |> ReasonReact.statelessComponent;

let make = _children => {
  let value = {value: "Hello", className: "btn btn-info"};
  {
    ...component,
    render: _self =>
      <BtnColorContext.Provider value>
        <Button />
      </BtnColorContext.Provider>
  }
};

Context.re

type pair;

[@bs.get] external provider: pair => ReasonReact.reactClass = "Provider";
[@bs.get] external consumer: pair => ReasonReact.reactClass = "Consumer";

[@bs.module "react"] external createContext: 'a => pair = "";

module MakePair = (Config: {
  type t;
  let defaultValue: t;
}) => {
  let _pair = createContext(Config.defaultValue);

  module Provider = {
    let make = (~value: Config.t, children) =>
      ReasonReact.wrapJsForReason(
        ~reactClass=provider(_pair),
        ~props={"value": value},
        children,
      );
  };

  module Consumer = {
    let make = (children: (Config.t) => ReasonReact.reactElement) =>
      ReasonReact.wrapJsForReason(
        ~reactClass=consumer(_pair),
        ~props=Js.Obj.empty(),
        children
      );
  };
};