[Question] Providing translate() to all children through react-router or one component

[rockchalkwushock]

I'm curious if it is possible to provide translate() to all the components through react-router. So basically it would be provided to all children of the home route? I'm trying to find a way to limit how many times I am importing in the same libraries and modules for better performance. I'm going to keep playing around with it; but if you have any ideas I'd greatly appreciate it! Great package by the way really easy to use 👍

index.js

import React from 'react';
import { render } from 'react-dom';
import { IntlActions } from 'react-redux-multilingual';
import { store } from './redux/store';
import Root from './Root';
import '../public/styles.css';

const DEFAULT_LANGUAGE = 'ru';
store.dispatch(IntlActions.setLocale(DEFAULT_LANGUAGE));

render(<Root />, document.getElementById('root'));

Root.jsx

import React from 'react';
import { Provider } from 'react-redux/es';
import { IntlProvider } from 'react-redux-multilingual';
import { Router } from 'react-router/es';
import ReduxToastr from 'react-redux-toastr';
import { history, store } from './redux/store';
import componentRoutes from './dynamicRouting';
import { translations } from './modules';

const Root = () => (
  <Provider store={store}>
    <IntlProvider translations={translations}>
      <div className='provider'>
        <Router history={history} routes={componentRoutes} />
        <ReduxToastr
          timeOut={1500}
          newestOnTop={false}
          preventDuplicates
          position="top-right"
          transitionIn="bounceIn"
          transitionOut="bounceOut"
          progressBar
        />
      </div>
    </IntlProvider>
  </Provider>
);

export default Root;

dynamicRouting.js

import AppContainer from './modules/entry/AppContainer';
import HomePage from './modules/layout/HomePage';

const componentRoutes = {
  component: AppContainer,
  path: '/',
  indexRoute: { component: HomePage }
};

export default componentRoutes;

AppContainer.jsx

import { connect } from 'react-redux/es';
import App from './App';

export default connect()(App);

App.jsx

import React, { Component, PropTypes } from 'react';

class App extends Component {
  render() {
    const { children } = this.props;
    return (
      <div className="application">
        { children }
      </div>
    );
  }
}

App.propTypes = {
  children: PropTypes.element.isRequired,
};

export default App;

HomePage.jsx

import React, { PropTypes } from 'react';

const HomePage = ({ translate }) => (
  <div className='homepage'>
    <h1>{translate('hello')}</h1>
  </div>
);

HomePage.propTypes = {
  translate: PropTypes.func
};

export default HomePage;

[rmdort]

Hi @rockchalkwushock

There is no performance bottleneck if you import the same libraries and modules. Babel optimizes it by default.

To use translate in all components, you can use the HOC or using Context

import { withTranslate } from 'react-redux-multilingual'
import React, { PropTypes } from 'react';

const HomePage = ({ translate }) => (
  <div className='homepage'>
    <h1>{translate('hello')}</h1>
  </div>
);

HomePage.propTypes = {
  translate: PropTypes.func
};

export default withTranslate(HomePage)

Context

const HomePage = (props, context) => {
  return (
    <div>
      {context.translate('hello', { name: 'John Doe' })}
    </div>
  )
}

HomePage.contextTypes = {
  translate: React.propTypes.func
}

module.exports = HomePage