3

I used create-react-app-ts to create a new React app. What is the best option for adding i18n?

I looked at react-intl but it looks quite heavy to work with. Then I looked at linguiJS which promises to make it easier, but I can not find examples of how to use it with create-react-app. Also I'm not sure it's a good idea to have both formatting (of numbers etc), pluralization and translation in one module... I would prefer to use separate libraries...

Please share your thoughts. What is the best (easiest/prettiest) way to get i18n in react apps.

Thanks

olefrank
  • 6,452
  • 14
  • 65
  • 90
  • did you already looked at https://github.com/i18next/react-i18next ?!? runs with cra as no changes to babel, webpack needed...based on i18next – jamuhl Dec 04 '17 at 07:14
  • plus for formatting you can choose what you like...even custom formats... – jamuhl Dec 04 '17 at 07:14
  • @jamuhl Could you provide an example / link how to use i18next with redux and connected components. Should I use the HOC approach? – olefrank Dec 05 '17 at 11:40
  • you can use both...the translate hoc (https://react.i18next.com/components/translate-hoc.html) or the i18n render prop (https://react.i18next.com/components/i18n-render-prop.html). There is no difference with/without redux...https://github.com/i18next/react-i18next/tree/master/example – jamuhl Dec 05 '17 at 12:57
  • I dont see any redux in your examples...! – olefrank Dec 05 '17 at 12:59
  • sure...as it makes no difference...translations are not stored in the redux store...let me paste some code – jamuhl Dec 05 '17 at 13:00

1 Answers1

1

with redux just use both providers (if not using react-i18next without provider - which i like more):

export default function App({ store }) {
  return (
    <I18nextProvider i18n={i18n}>
      <Provider store={store}>
        <YourRootComponent />
      </Provider>
    </I18nextProvider>
  );
}

And compose both the translate hoc and redux connect in your component:

export default compose(
  translate('namespace', { wait: true }),
  connect(mapStateToProps, mapDispatchToProps),
)(YourComponent);
jamuhl
  • 4,352
  • 2
  • 25
  • 31