Skip to content
This repository has been archived by the owner on Aug 19, 2024. It is now read-only.

Commit

Permalink
AG-2178 Add docs and example on how to use Context API with React
Browse files Browse the repository at this point in the history
  • Loading branch information
seanlandsman committed Oct 16, 2018
1 parent 518a95e commit 4998a51
Show file tree
Hide file tree
Showing 4 changed files with 16 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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)
*/
Expand Down
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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>
);
}

Expand All @@ -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);
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import GridComponent from "./GridComponent";

import gridData from "./gridDataReducer";

import FontContext from './fontContext'

let store = createStore(gridData);

/*
Expand All @@ -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>
)
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import React from "react";

export default React.createContext('normal');

0 comments on commit 4998a51

Please sign in to comment.