Considering usage for React Context - Localization/Utilities

App.js

// imports & variables, etc

ReactDOM.render(
  <Localization messageBundle={{ foo: 'Welcome', bar: 'This is', baz: 'a website' }}>
    <Provider store={Store}>
      <Router history={history}>
        <Route path="/" component={SomeParentRenderingGrandchildrenThatWantLocalizedStrings}>
      </Router>
    </Provider>
  </Localization>, 
  document.getElementById('react-app')
);

DisplayGrandchild.jsx

import React, { PropTypes } from 'react';
const { number, string, func } = PropTypes;

const DisplayGrandchild = (props, context) => {
  const { foo, bar, baz } = props;
  const { localize } = context;

  return (
    <div>
      <p>{localize(foo)}</p>
      <p>{`${localize(bar)}, ${localize(baz)}!`}</p>
    </div>
  );
};

DisplayGrandchild.propTypes = { foo: string, bar: string, baz: string };

DisplayGrandchild.defaultProps = { foo: '', bar: '', baz: '' };

DisplayGrandchild.displayName = 'DisplayGrandchild';

DisplayGrandchild.contextTypes = { localize: func };

export default DisplayGrandchild;

Localization.jsx

import React, { PropTypes } from 'react';
const { func, objectOf, string } = PropTypes;

const Localization = React.createClass({
  propTypes: {
    messageBundle: objectOf(string).isRequired
  },

  getDefaultProps() {
    return {
      messageBundle: {}
    };
  },

  childContextTypes: {
    localize: func
  },

  getChildContext() {
    return {
      localize: this.localize
    };
  },

  localize(key) {
    return this.props.messageBundle[key] || key;
  },

  render() {
    return this.props.children;
  }
});

export default Localization;