Novice, Practiced, Mastered

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

    0.1.1 • Public • Published

    react-lingua Build

    A simple i18n engine for React.

    Installation

    yarn add react-lingua
    
    npm i react-lingua
    

    Main goals

    • Lightweight & fast
    • No dependencies
    • Ability to dynamically change locale
    • Hooks!
    • Placeholder replacement
    • Ability to embed HTML & JSX inside translations
    • Simple namespacing (using namespaceName:translationId notation)

    Usage

    // src/App.js
    import React from 'react';
    import { render } from 'react-dom';
    import { I18nProvider } from 'react-lingua';
    import { Main } from './Main';
     
    const translations = {
      'en-US': {
        helloWorld: 'Hello World!',
        welcome: 'Nice to meet you, {name}!',
        info: 'Example paragraph {someComp}.',
        infoPart: 'with JSX inside',
      },
      'pl-PL': {
        helloWorld: 'Witaj Świecie!',
        welcome: 'Miło Cię poznać, {name}!',
        info: 'Przykładowo paragraf {someComp}.',
        infoPart: 'z JSXem w środku',
      },
    };
     
    const App = () => (
      <I18nProvider
        initialLocale="en-US"
        translations={translations}
        onChange={(prevLocale, newLocale) => console.log(`Changed from ${prevLocale} to ${newLocale}`)}
      >
        <Main />
      </I18nProvider>
    );
     
    render(<App />, document.getElementById('app'));
    // src/Main.js
    import React from 'react';
    import { Translation, useTranslation } from 'react-lingua';
     
    export const Main = () => {
      const { t, locale, setLocale } = useTranslation();
     
      return (
        <main>
          <h1>{t('helloWorld')}</h1>
          <h2>{t('welcome', { name: 'Dominika' })}</h2>
          <p>
            <Translation
              id="info"
              values={{
                someComp: <strong>{t('infoPart')}</strong>
              }}
            />
          </p>
        </main>
      );
    };

    TODO

    • Prepare live examples (preferably on codesandbox.io)
    • Figure out the most efficient way of importing locales that are not used
    • Maybe a better directory structure
    • A bit more tests
    • A bit better typings
    • Add a few comments here and there for better DX
    • Add API section to README

    Install

    npm i react-lingua

    DownloadsWeekly Downloads

    6

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    19.6 kB

    Total Files

    15

    Last publish

    Collaborators

    • visualfanatic