Add support for React Context

* See https://reactjs.org/docs/context.html

Author: jvliwanag

src/React/Basic.js

@@ -218,3 +218,11 @@ exports.toReactComponent = function(_unionDict) {
     };
   };
 };
+
+exports.createContext = function(defaultValue) {
+  var context = React.createContext(defaultValue);
+  return {
+    consumer: context.Consumer,
+    provider: context.Provider
+  };
+};

src/React/Basic.purs

@@ -21,6 +21,10 @@ module React.Basic
   , ReactComponentInstance
   , toReactComponent
   , Ref
+  , ReactContext
+  , createContext
+  , provider
+  , consumer
   ) where
 
 import Prelude
@@ -369,6 +373,46 @@ foreign import toReactComponent
   -> { render :: Self props state -> JSX | spec }
   -> ReactComponent { | jsProps }
 
+type ReactContext a =
+  { provider :: ReactComponent { value :: a, children :: Array JSX }
+  , consumer :: ReactComponent { children :: a -> Array JSX }
+  }
+
+-- | Create a `ReactContext` given a default value. Use `provider` and `consumer`
+-- | to provide and consume context values. Alternatively, use the fields of
+-- | `ReactContext` directly if a `ReactComponent` is required for interop.
+-- |
+-- | ```purs
+-- | render self =
+-- |   R.div_
+-- |   [ R.button
+-- |     { onClick: capture_ $ self.setState \s -> s { counter = s.counter + 1 }
+-- |     , children: [ R.text "Tick!" ]
+-- |     }
+-- |   , provider countContext self.state.counter
+-- |     [ consumer countContext \counter ->
+-- |        [ R.text $ "Ticks: " <> (show counter)
+-- |        ]
+-- |     ]
+-- |   ]
+-- | ```
+-- |
+-- | __*See also:* `provider`, `consumer`, React's documentation regarding Context__
+foreign import createContext :: forall a. a -> ReactContext a
+
+-- | Create a provider `JSX` given a context value and children.
+-- |
+-- | __*See also:* `createContext`, `consumer`__
+provider :: forall a. ReactContext a -> a -> Array JSX -> JSX
+provider context value children =
+  element context.provider { value, children }
+
+-- | Create a consumer `JSX` from a context value to children.
+-- |
+-- | __*See also:* `createContext`, `producer`__
+consumer :: forall a. ReactContext a -> (a -> Array JSX) -> JSX
+consumer context children =
+  element context.consumer { children }
 
 -- |
 -- | Internal utility or FFI functions