Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-tiny-i18n with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var reactTinyI18n = require("react-tiny-i18n")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-tiny-i18n v0.4.0

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

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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free