react-simple-context-i18n

React components for i18n based on the Context API

Introduction

Minimalistic approach to introducing i18n to your application.

Internally, it uses the React Context API. Utilizes create-react-context and react-lifecycles-compat in order to support older versions of React as well.

Install

npm install --save react-simple-context-i18n

or

yarn add react-simple-context-i18n

API

Message

The Message component is a consumer for the Translation Provider which can be used for text translation. It consists of one prop, id, and performs a lookup in the translations object by using the translator.

The Message component renders the translations as strings by default. For older versions of React (< 16), the translations are wrapped in a span element.

TranslationProvider

Preview of the props for the TranslationProvider and the default values:

Preview of the desired format for the translations prop:

The translator prop provides an option to do a custom translation lookup (to be used if the translations prop is not in the desired format). It is invoked with the following parameters:

translator({ language, translations, id })

Note: if you are using a version of React < 16, make sure that the structure of the children of the provider are supported by that particular version. The example above, having multiple elements as direct children of the provider, will not work for older versions (array of elements as children is supported only in React v16).

Example

Navigate to the /example folder for an example of showing a translated text and updating the language.

License

MIT