Provide example using context API

Author: arecvlohe

examples/with-reasonml/components/Context.re

@@ -0,0 +1,27 @@
+module type Config = {
+  type context;
+  let defaultValue: context;
+};
+
+module Make = (Config: Config) => {
+  let x = React.createContext(Config.defaultValue);
+
+  module Provider = {
+    let make = x->React.Context.provider;
+
+    [@bs.obj]
+    external makeProps:
+      (
+        ~value: Config.context,
+        ~children: React.element,
+        ~key: string=?,
+        unit
+      ) =>
+      {
+        .
+        "value": Config.context,
+        "children": React.element,
+      } =
+      "";
+  };
+};

examples/with-reasonml/components/CountConsumer.re

@@ -0,0 +1,13 @@
+type reducer = (CountContext.state, CountContext.action => unit);
+
+[@react.component]
+let make = () => {
+  let ({count}, dispatch): reducer = React.useContext(CountContext.x);
+
+  <div>
+    <div> {j|This is the count: $count|j}->React.string </div>
+    <button onClick={_e => dispatch(CountContext.Increment)}>
+      "Increment count"->React.string
+    </button>
+  </div>;
+};

examples/with-reasonml/components/CountContext.re

@@ -0,0 +1,21 @@
+type state = {count: int};
+type action =
+  | Increment;
+let init = {count: 0};
+let reducer = (state, action) => {
+  switch (action) {
+  | Increment => {count: state.count + 1}
+  };
+};
+
+type t = (state, action => unit);
+
+include Context.Make({
+  type context = t;
+  let defaultValue = (
+    init,
+    _ => {
+      ();
+    },
+  );
+});

examples/with-reasonml/components/CountProvider.re

@@ -0,0 +1,6 @@
+[@react.component]
+let make = (~children) => {
+  let reducer = React.useReducer(CountContext.reducer, CountContext.init);
+
+  <CountContext.Provider value=reducer> children </CountContext.Provider>;
+};

examples/with-reasonml/components/Counter.re

@@ -3,24 +3,22 @@
     * Add updates the components internal state.
  */
 type action =
-  | Add
+  | Add;
 
 /*
    This is the components internal state representation. This state object
    is unique to each instance of the component.
  */
-type state = {
-  count: int,
-};
+type state = {count: int};
 
 let counterReducer = (state, action) =>
-  switch(action) {
-  | Add => { count: state.count + 1 }
+  switch (action) {
+  | Add => {count: state.count + 1}
   };
 
 [@react.component]
 let make = () => {
-  let (state, dispatch) = React.useReducer(counterReducer, { count: 0 });
+  let (state, dispatch) = React.useReducer(counterReducer, {count: 0});
   let (globalState, globalDispatch) = GlobalCount.useGlobalCount();
 
   let countMsg = "Count: " ++ string_of_int(state.count);
@@ -33,6 +31,8 @@ let make = () => {
     <button onClick={_ => globalDispatch(GlobalCount.Increment)}>
       {React.string("Add")}
     </button>
+    <CountConsumer />
+    <CountConsumer />
   </div>;
 };
 

examples/with-reasonml/pages/_app.js

@@ -0,0 +1,28 @@
+import App, { Container } from 'next/app'
+import React from 'react'
+import { make as CountProvider } from '../components/CountProvider.bs'
+
+class MyApp extends App {
+  static async getInitialProps({ Component, router, ctx }) {
+    let pageProps = {}
+
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx)
+    }
+
+    return { pageProps }
+  }
+
+  render() {
+    const { Component, pageProps, store } = this.props
+    return (
+      <Container>
+        <CountProvider>
+          <Component {...pageProps} />
+        </CountProvider>
+      </Container>
+    )
+  }
+}
+
+export default MyApp