Merge pull request #27 from reasonml-community/create-intl

Add createIntl and RawIntlProvider.

Author: cknitt

examples/App.re

@@ -8,6 +8,36 @@ let reducer = (_, action) =>
   | SetLocale(locale) => locale
   };
 
+// As an alternative to using IntlProvider like in the main make function below,
+// you can construct the intl instance yourself and pass it to RawIntlProvider instead.
+// This is especially useful if you need to create/use the intl instance outside of a
+// React component.
+module WithRawIntlProvider = {
+  let createIntlForLocale = locale => {
+    let intlConfig =
+      ReactIntl.intlConfig(
+        ~locale=locale->Locale.toString,
+        ~messages=locale->Locale.translations->Util.translationsToDict,
+        (),
+      );
+    let intlCache = ReactIntl.createIntlCache();
+
+    ReactIntl.createIntl(intlConfig, intlCache);
+  };
+
+  [@react.component]
+  let make = () => {
+    let (locale, dispatch) = reducer->React.useReducer(initialState);
+
+    let intl =
+      React.useMemo1(() => createIntlForLocale(locale), [|locale|]);
+
+    <ReactIntl.RawIntlProvider value=intl>
+      <Page locale setLocale={locale => locale->SetLocale->dispatch} />
+    </ReactIntl.RawIntlProvider>;
+  };
+};
+
 [@react.component]
 let make = () => {
   let (locale, dispatch) = reducer->React.useReducer(initialState);

package.json

@@ -22,13 +22,13 @@
     "reason-react": ">=0.7.0"
   },
   "devDependencies": {
-    "bs-platform": "5.0.6",
+    "bs-platform": "5.2.1",
     "bs-react-intl-extractor-bin": "0.7.0",
     "bsb-js": "^1.1.7",
-    "parcel-bundler": "1.12.3",
+    "parcel-bundler": "1.12.4",
     "react": "16.8.6",
     "react-dom": "16.8.6",
-    "react-intl": "3.1.6",
+    "react-intl": "3.4.0",
     "reason-react": "0.7.0"
   },
   "repository": {

src/ReactIntl.re

@@ -140,6 +140,38 @@ external domTag: string => textComponent = "%identity";
 external textComponent: React.component('props) => textComponent =
   "%identity";
 
+type intlCache;
+
+[@bs.module "react-intl"]
+external createIntlCache: unit => intlCache = "createIntlCache";
+
+type intlConfig;
+
+[@bs.obj]
+external intlConfig:
+  (
+    ~locale: string,
+    ~timeZone: string=?,
+    ~formats: Js.t({..})=?, /* TODO */
+    ~textComponent: textComponent=?,
+    ~messages: Js.Dict.t(string),
+    ~defaultLocale: string=?,
+    ~defaultFormats: Js.t({..})=?, /* TODO */
+    ~onError: string => unit=?,
+    unit
+  ) =>
+  intlConfig =
+  "";
+
+[@bs.module "react-intl"]
+external createIntl: (intlConfig, intlCache) => Intl.t = "createIntl";
+
+module RawIntlProvider = {
+  [@react.component] [@bs.module "react-intl"]
+  external make: (~value: Intl.t, ~children: React.element) => React.element =
+    "RawIntlProvider";
+};
+
 module IntlProvider = {
   [@react.component] [@bs.module "react-intl"]
   external make: