Ryan Johnson
3 min readJun 4, 2018

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

React Localize Redux 3.0

I’m happy to announce the latest release of react-localize-redux. New features, new docs, new logo, and now works without Redux by default.

Want to get straight to it? Github /Official Docs

No Redux, No problem!

This latest release is built on React’s Context, and will now work without Redux by default. All you need to do is wrap your application in LocalizeProvider to get started.

We still ❤️ Redux

Redux support hasn’t gone anywhere — It’s in the name after all! So your app is already using redux? No problem, as react-localize-redux supports Redux out of the box.

Insert translations with <Translate /> component

The Translate component is how you access your translations from your components, and it can be used in a variety of ways.

Include inline default translations

With the Translate component you can include an inline translation for the default language by passing as children to the component.

Use withLocalize to consume LocalizeContext

Under the hood react-localize-redux uses React.createContext to createLocalizeContext, which holds the actions and properties needed to manage your translations. It would be tedious to explicitly wrap each component in LocalizeContext.Consumer, which is where the withLocalize higher-order-component helps.

Manage missing translations

By default any components with a missing translation will render a default missing translation message. This can be overridden by setting the onMissingTranslation initialize option.

You can also override this setting for a specific translation.

Want to learn more?

Make sure to check out the official docs, which includes full details on these additional features plus more.

More where this came from

This story is published in Noteworthy, where thousands come every day to learn about the people & ideas shaping the products we love.

Follow our publication to see more product & design stories featured by the Journal team.

Ryan Johnson

fullstack web developer • JavaScript • React.js • AngularJS • Node.js