16 - Context Provider

16-context-provider.markdown

16 - Context Provider

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 InjectLocale extends React.Component {
  render () {
    return this.props.children(this.context.locale);
  }
}
InjectLocale.contextTypes = {
  locale: PropTypes.string
}

const LocalizedHello = () => (
  <InjectLocale>
    {(locale) => (
      locale === 'fr' ? (
        <span>Bonjour !</span>
      ) : (
        <span>Hello !</span>
      )
    )}
  </InjectLocale>
)

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>