Nutritious Pancake Mountain

    i18nano
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    i18nano GitHub license BundlePhobia BundlePhobia Coverage

    Internationalization for the react is done simply.

    Lightweight translation module with functionality similar to react-i18next.

    Features

    • Async translation loading
    • Fallback translations
    • Preloading translations
    • Mustache-like templates
    • Deep object property lookup
    • And other cool stuff

    Usage

    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.

    Components

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

    Hooks

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

    HOCs

    • withTranslation - injects the translation function
    • withTranslationChange - injects the information and useful functions

    Switch

    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} onChange={(event) => {
          translation.change(event.target.value);
        }}>
          {translation.all.map((lang) => (
            <option key={lang} value={lang}>
              {lang}
            </option>
          ))}
        </select>
      );
    };

    Concurrent features

    If you use react 18 it is recommended to use transition. Then when you switch languages, the last downloaded translation will be displayed instead of the loader.

    Split

    You can use several TranslationProviders to split up translation files, for example:

    import { TranslationProvider, Translation } from 'i18nano';
    
    const translations = {
      header: {
        'en': () => import('translations/header/en.json')
      },
      main: {
        'en': () => import('translations/main/en.json')
      }
    };
    
    export const Header = () => {
      return (
        <TranslationProvider translations={translations.header}>
          <header>
            <Translation path="title" />
          </header>
        </TranslationProvider>
      );
    };
    
    export const Main = () => {
      return (
        <TranslationProvider translations={translations.main}>
          <h1>
            <Translation path="title" />
          </h1>
        </TranslationProvider>
      );
    };

    Installation

    Recommend to use yarn for dependency management:

    yarn add i18nano

    License

    i18nano is MIT licensed.

    Install

    npm i i18nano

    DownloadsWeekly Downloads

    64

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    42.5 kB

    Total Files

    22

    Last publish

    Collaborators

    • eolme