Internationalization for the react is done simply.

Lightweight translation module with functionality similar to react-i18next.

• Async translation loading
• Fallback translations
• Preloading translations
• Translations in translations
• Deep translations and values lookup
• Mustache-like templates
• Nested providers
• No dependencies
• And other cool stuff

Let's create typical, unopinionated and simple component with the following structure:

import { TranslationProvider, Translation } from 'i18nano';
import { load } from './load';

const translations = {
  // dynamic import static json
  'en': () => import('translations/en.json'),
  // or with custom load function
  'ru': () => load('ru')
};

export const App = () => {
  return (
    <TranslationProvider translations={translations}>
      <header>
        <Translation path="header">
          Loading...
        </Translation>
      </header>
    </TranslationProvider>
  );
};

And that's all it takes! For other available provider options see definition.

• Translation - recommended way to use i18nano
• TranslationRender - low level rendering component

• useTranslation - returns the function to extract the translation
• useTranslationChange - returns the object with information and useful functions such as switch and preload languages

To switch between languages, let's create a component using the hook as follows:

import { useTranslationChange } from 'i18nano';

export const LanguageChange = () => {
  const translation = useTranslationChange();

  return (
    <select value={translation.lang}