ReasonReact Context API Example

App.re

module StringContext =
  Context.MakePair({
    type t = string;
    let defaultValue = "Awesome";
  });

let component = ReasonReact.statelessComponent("Tree");

let make = _children => {
  ...component,
  render: _self =>
    <StringContext.Provider value="Hello folks">
      <div>
        <StringContext.Consumer>
          ...{text => str(text)}
        </StringContext.Consumer>
      </div>
    </StringContext.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
      )
  };
};

I get this error:

Context.re:7 should probably be [@bs.module "react"], otherwise it seems react is loaded twice. Might be a webpack issue though.

Here's the warning I get:

There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.