react-localize-redux

---

Localization library for handling translations in React.

• Does not require Redux, but does provide out of the box support for it.
• Built on React's native Context.
• Include inline default translations
• Dynamic translations
• HTML translations
• Plus more...

Installation

npm install react-localize-redux --save

Documentation

The official documentation can be found online, and is divided into the following sections:

• Getting Started
• Formatting Translations
• Guides
• FAQ
• API Reference
• Migrating from v2 to v3

Demo

Code Sandbox Demo

Not using React 16?

If you are unable to upgrade to at least react v16.0.0 in your app you do have the ability to use an older version of react, but should only be used as a last resort. The Translate component requires the ability to render fragments and strings, which isn't available in older versions of react. See Can I use older versions of React? for workarounds to this issue.

Contributing

Want to help? Contributions are welcome, but please be sure before submitting a pull request that you have first opened an issue to discuss the work with the maintainers first. This will ensure we're all on the same page before any work is done.

For additional info:

• See Issue Template.
• See Pull Request Templete.

Change Log

This project adheres to Semantic Versioning. Every release will be documented along with any breaking changes when applicable.

Changelog

3.0.0 (June 3, 2018)

• Now works without Redux by defualt.
• Add LoclaizeProvider a wrapper around React's Context.Provider
• Add LocalizeContext built on React.createContext.
• Add withLocalize higher-order component
• Add onMissingTranslation initialize option that provides more control over handling missing translations.
• Optionally supports Redux by passing redux store to LocalizeProvider.

Breaking Changes

• The Redux action creators initialize, addTranslation, addTranslationForLanguage, and setActiveLanguage have been removed. Instead they are now methods available on LocalizeContext, and can be added to your component's as props using the withLocalize higher-order component.

• The translationTransform option is no longer available as an initialize option. Instead addTranslation now takes an options object, which accepts the translationTransform function.

  • This made more sense as this allows for adding transformations specific to a single translation instead of globally setting a transformation that you'd be stuck using for all translations.

• initialize now takes a single options argument instead of multiple arguments.

• Translate render props API now takes a single options object as an argument instead of multiple arguments.

• renderInnerHtml option now set to false by default instead of true.

  • This is to mirror React's functionality where by default any children will be escaped by defualt.

• Remove showMissingTranslationMsg, missingTranslationMsg, missingTranslationCallback initialize options. THe new onMissingTranslation option now covers all these scenarios.

• Remove setTranslations action - instead pass languages to initialize.

• Remove localize higher-order component - use new withLoclize higher-order component instead. Or if you only require access to translate function use <Translate> component instead.

• If using Redux, all state related to localize will be added under the localize key instead of locale.

• If using Redux, localeReducer is now named localizeReducer.

• Fix typos in ADD_TRANSLATION_FOR_LANGUAGE action (Issue #65)