AG-2178 Add docs and example on how to use Context API with React
This commit is contained in:
@@ -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)
|
||||
*/
|
||||
|
||||
@@ -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);
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
import React from "react";
|
||||
|
||||
export default React.createContext('normal');
|
||||
Reference in New Issue
Block a user