react-simple-context-i18n v0.0.1
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
7 years ago
7 years ago