Want to learn React? Check out my new course React for Beginners: Build and app, and learn the fundamentals.

Dead simple localization for your React components

Want to support multiple languages in your React components? Then react-localize-redux may be the light weight solution you’re looking for. Using Redux? No problem, redux support works out of the box with no additional dependencies.

Getting Started

npm install react-localize-redux --save-dev

Add LocalizeProvider

By wrapping your application with <LocalizeProvider /> all component's in the hierarchy below will have the ability to work with localize.

Wrap your app with <LocalizeProvider />

Initialize localize

Before accessing any translations in your app you will need to initialize localize with your settings. The settings object requires languages, while translation, and options are optional.

Add translation data

Translation data comes in two different flavours — the all languages and single language format.

• Use addTranslation method to add data in all languges format.
• Use addTranslationForLanguage method to add data in single languge format.

As soon as you add the translation data to localize it can be rendered in your components using Translate.

To add multi language translations, use addTranslation:

To add single language translations, use addTranslationForLanguage:

Add translations to components

Once you’ve added your translation data you’ll need a way to get it into your components. That is where the Translate component comes in, and it can be used in a variety of ways. The id prop passed to Translate should match the id of the translation data you want to insert

Assuming the following translations have been added:

Translate with default translations:

You can include your default language’s translation with Translate by passing it as children to the component. The translation will automatically be added to your translation data for that id' and default language.

With default language:

Translate with self-closing tag

If you don’t wish to include default translations then all you need provide is a translation id prop, and no children.

With self-closing tag:

Translate with Render props

You can also pass Translate a function as it’s child that returns the elements you want to render. This function is commonly referred to as a render prop function, and is passed a single object with props Translate, activeLanguage, and languages.

With render props:

Change active language

Use the setActiveLanguage method to change localize’s active language.

Language selector using setActiveLanguage:

Want more?

For full details including installation and API docs visit visit the project’s github page, where you will find the official documentation.

For more React, Redux, and JavaScript reading follow me on Medium or Twitter.