15 - Context

15-context.markdown

15 - Context

A Pen by Etienne Deladonchamps on CodePen.

License.

index.html

<div id="app"></div>

script.babel

class LocaleProvider extends React.Component {
  getChildContext() {
    return { locale: "fr" };
  }
  render() {
    return this.props.children;
  }
}
LocaleProvider.childContextTypes = {
  locale: PropTypes.string
};

class LocalizedHello extends React.Component {
  render () {
    if (this.context.locale === 'fr') {
      return <span>Bonjour !</span>;
    }
    return <span>Hello !</span>;
  }
}

LocalizedHello.contextTypes = {
  locale: PropTypes.string
}

const App = () => (
  <LocaleProvider>
    <LocalizedHello />
  </LocaleProvider>
);

ReactDOM.render(
  <App/>,
  document.getElementById('app')
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.5.10/prop-types.js"></script>