React-to-use i18n configuration and components for React Applications.

Usage no npm install needed!

<script type="module">
  import 4reactLocalize from 'https://cdn.skypack.dev/@4react/localize';


@4react / localize

React-to-use i18n configuration and components for React Applications.


The purpose of this package is to provide a simple and standard solution for the largest amount of projects.

It is mainly based on react-i18next. Please consider to support their work.


Import dependency

npm i @4react/localize

Init i18n

Initialize i18n with initI18n, optionally specifying languages and namespaces.

import { initI18n } from '@4react/localize'

  ['en', 'it', 'es'], // languages
  ['common', 'profile'] // namespaces

Provide localization

Use the Localization component to provide translations over the application.

import { Localization } from '@4react/localize'

const App = () => (
    // content

Translate labels

Use the Localized component to translate labels.

import { Localized } from '@4react/localize'

const CustomComponent = () => (
  <Localized label="awesome" />

...and use any kind of filler (also components)

const CustomComponent = () => (
      name: 'Matteo',
      age: 28,
      component: <MyCustomFiller />

// Hi, I'm {{name}} and I'm {{age}} years old. Look at this {{component}}!

Translations are rendered as simple text with no additional style or structure.



Parameter Type Default Description
languages string[] ['en'] [optional] Set of supported languages. The first element is considered as fallback.
namespaces string[] ['translations'] [optional] Set of supported namespaces.


Props Type Default Description
defaultNS string 'translations' [optional] Specify the default namespace.


Props Type Default Description
label string - Label to localize.
ns string - [optional] Namespace to witch the label belongs. In case of no namespace specified, the defaultNS of the Localization component is used.
fillers object - [optional] Maps of elements to fills placeholders in label. Fillers could be of type string, number or components.
lang string - [optional] Language to override the current selected one.