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.
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.
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
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.
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
.
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.
Change active language
Use the setActiveLanguage method to change localize’s active language.
Want more?
For full details including installation and API docs visit visit the project’s github page, where you will find the official documentation.