ReactIntl.re

type messageDescriptor = {. "id": string, "defaultMessage": string};

[@bs.module "react-intl"]
external defineMessages : Js.Dict.t(messageDescriptor) => Js.Dict.t(messageDescriptor) =
  "";

module FormattedMessage = {
  [@bs.module "react-intl"] external formatMessage : ReasonReact.reactClass = "FormattedMessage";
  let make =
      (
        ~id: string,
        ~defaultMessage: string,
        ~description: option(string)=?,
        ~values: option(Js.t('any))=?,
        _children
      ) =>
    ReasonReact.wrapJsForReason(
      ~reactClass=formatMessage,
      ~props={
        "id": id,
        "defaultMessage": defaultMessage,
        "values": Js.Nullable.from_opt(values),
        "description": Js.Nullable.from_opt(description)
      },
      _children
    );
};

module IntlProvider = {
  [@bs.module "react-intl"] external intlProvider : ReasonReact.reactClass = "IntlProvider";
  let make = (~locale: option(string)=?, ~messages: option(Js.t('any))=?, _children) =>
    ReasonReact.wrapJsForReason(
      ~reactClass=intlProvider,
      ~props={"locale": Js.Nullable.from_opt(locale), "messages": Js.Nullable.from_opt(messages)},
      _children
    );
};

module IntlShape = {
  type formatMessage = [@bs.meth] (messageDescriptor => string);
  type t = {. "formatMessage": formatMessage};
};

module IntlObjectProvider = {
  [@bs.module "./ReactIntlInteropt"] external intlProvider : ReasonReact.reactClass = "default";
  let make = (~renderer: IntlShape.t => ReasonReact.reactElement, _children) =>
    ReasonReact.wrapJsForReason(
      ~reactClass=intlProvider,
      ~props={"render": (intl) => renderer(intl)},
      _children
    );
};

let formatMessage = (dict: Js.Dict.t(messageDescriptor), intl: IntlShape.t, key: Js.Dict.key) => {
  let maybeKey = key |> Js.Dict.get(dict);
  switch maybeKey {
  | None => Js.Exn.raiseError("Given intl message key does not exist")
  | Some(translation) => intl##formatMessage(translation)
  }
};

ReactIntlInteropt.js

import { injectIntl } from "react-intl";
const intlShapeProvider = ({ intl, render }) => {
  return render(intl);
};

export default injectIntl(intlShapeProvider);

usage.re

 let comp = <ReactIntl.IntlProvider>
      <ReactIntl.IntlObjectProvider
        renderer=(
          (intl) => {
            let message = intl##formatMessage({"id": "hello", "defaultMessage": "hello world"});
            <div> (ReasonReact.stringToElement(message)) </div>
          }
        )
      />
    </ReactIntl.IntlProvider>;


/* in conjunction with defineMessages */

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

let messages =
  Js.Dict.fromList([
    ("internalNotesTitle", {"id": "internalNotesTitle", "defaultMessage": "Internal notes"})
  ]);

let intlMessages = ReactIntl.defineMessages(messages);

let make = (~notes, ~intl, _children) => {
  ...component, /* spread the template's other defaults into here  */
  render: (_self) =>
    <div>
    (
      ReasonReact.stringToElement(ReactIntl.formatMessage(intlMessages, intl, "internalNotesTitle"))
    )
  </div>;
};