react-tiny-i18n

React Tiny i18n

📝 A tiny (~500B) i18n implementation for handling translations in React

Features

• It's tiny (~500B) so, you know... not a lot on the perf or bandwidth
• Cache's translations so they only translate once (even with dynamic content)
• Written in TypeScript for nice autocompletion
• Allows for multiple language files
• Includes customizable language switcher
• Has the ability to translate outside of React components

Installation

npm i react-tiny-i18n or yarn add react-tiny-i18n

Demo

See a demo here: https://dericgw.github.io/react-tiny-i18n/

Usage

First, you need some translations that take the shape of an object. This could be from an API or a JSON file or even a plain ole' JavaScript object. You can also go as many levels deep as you want. For instance, you may want to have a key for each page and then under that, you can have a key for each section within that page, and so on and so forth...

<Languages />

Once you have your translations, you need to make them available to your application. In order to do that, use the Languages component which takes two props: langauges and defaultLanguage:

const languages = {
  en: {
    home: { 
      intro: 'Hi, {{firstName}}!'
    }
  },
  fr: {
    home: { 
      intro: 'Salut, {{firstName}}!'
    }
  }
};

<Languages languages={languages} defaultLanguage="en">
  <Home />
</Languages>

Translator

Once you make the translations available, you want to display them. In order to do that, you can use dot notation in order to represent the path of the translation inside of the <T> component or the t() function:

Using the <T> component:

const Home = () => (
  <div>
    <h4><T replacements={{ firstName: 'Debo' }}>home.intro</T></h4>
  </div>
);

The child of the <T> component is the dot notated path. Also, the interpolated text is not wrapped in an element - only the text is returned.

Using the t() function

const Home = () => {
  // We can use this as a function and not just a React Component
  const text = t('home.intro', {
    firstName: 'Debo'
  });
  return (
    <div>
      <h4>{text}</h4>
    </div>
  );
};

The t() function can be used anywhere in your application.

<Switcher />

The last thing you will need is a way to switch between languages. For this, you can use the <Switcher /> component. This is a select component that has all of the languages listed as options. Whenever the select component changes, all of the text within the app is updated to the new language.

The <Switcher /> component takes an number of props and passes those props to the select component. This allows for things such as styling, etc.