AG-2178 Add docs and example on how to use Context API with React

Author: seanlandsman

src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx

@@ -6,6 +6,8 @@ import {connect} from "react-redux";
 
 import PriceRenderer from "./PriceRenderer";
 
+const ThemeContext = React.createContext('light');
+
 /*
  * This component serves to display the row data (provided by redux)
  */

src-examples/simpleReduxDynamicComponentExample/PriceRenderer.jsx

@@ -1,6 +1,8 @@
 import React, {Component} from "react";
 import {connect} from "react-redux";
 
+import FontContext from './fontContext'
+
 class PriceRenderer extends Component {
     constructor(props) {
         super(props);
@@ -18,7 +20,9 @@ class PriceRenderer extends Component {
 
     render() {
         return (
-            <span>{this.props.currencySymbol}{this.state.convertedValue}</span>
+            <FontContext.Consumer>
+                {fontWeight => <span style={{fontWeight}}> {this.props.currencySymbol}{this.state.convertedValue}</span> }
+            </FontContext.Consumer>
         );
     }
 
@@ -36,5 +40,5 @@ export default connect(
     },
     null,
     null,
-    { withRef: true } // must be supplied for react/redux when using GridOptions.reactNext
+    {withRef: true} // must be supplied for react/redux when using GridOptions.reactNext
 )(PriceRenderer);

src-examples/simpleReduxDynamicComponentExample/SimpleReduxExample.jsx

@@ -9,6 +9,8 @@ import GridComponent from "./GridComponent";
 
 import gridData from "./gridDataReducer";
 
+import FontContext from './fontContext'
+
 let store = createStore(gridData);
 
 /*
@@ -26,7 +28,9 @@ export default class SimpleReduxExample extends Component {
                 <div>
                     <h1>Simple Redux Example using Connected React Components</h1>
                     <HeaderComponent/>
-                    <GridComponent/>
+                    <FontContext.Provider value="bold">
+                        <GridComponent/>
+                    </FontContext.Provider>
                 </div>
             </Provider>
         )

src-examples/simpleReduxDynamicComponentExample/fontContext.js

@@ -0,0 +1,3 @@
+import React from "react";
+
+export default React.createContext('normal');