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

This commit is contained in:
Sean Landsman
2018-10-16 17:42:29 +01:00
parent 518a95ee89
commit 4998a51817
4 changed files with 16 additions and 3 deletions

View File

@@ -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)
*/

View File

@@ -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);

View File

@@ -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>
)

View File

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