i18n-lite

Modular, zero dependencies, tiny toolkit for i18n in react based apps. Inspired by i18next api. Focused on reduce bundle size.

Package includes its TypeScript Definitions

Install

npm install i18n-lite

Usage

// ./src/App.tsx
import I18n, { getLangDetector, Provider as I18nProvider } from 'i18n-lite';

import SomeComponentWithTranslation './SomeComponentWithTranslation';

const { detectLang, langHandler } = getLangDetector();

const en = {
  some: 'some strings {{param}}',
  richTextString: 'lorem <cpm>ipsum</cpm> <b>{{param}}</b>',
  // ...
};

// Create I18n instance
const i18n = new I18n({
  lang: detectLang(),
  fallbackLng: 'en',
  resource: {
    en,
  },
});

i18n.on('langChange', langHandler);

function App() {
  return (
    <I18nProvider i18n={i18n}>
      <SomeComponentWithTranslation />
    </I18nProvider>
  );
}

export default App;

// ./src/SomeComponentWithTranslation.tsx
import { useTranslation, Trans } from 'i18n-lite';

export default function SomeComponentWithTranslation() {
  // Simple way to translate strings with values interpolation
  const { t } = useTranslation();

  return (
    <div>
      <span>{t('some', { param: 'here' })}</span>
      <div>
        {/* Way to interpolate components and values */}
        <Trans
          i18nKey="richTextString"
          components={{
            cpm: (props) => <span {...props} />,
            b: <b />,
          }}
          values={{
            param: 'bar',
          }}
        />
      </div>
    </div>
  );
}

Development

npm run format # code fomatting
npm run lint # linting
npm run test # testing

Active maintenance with care and ❤️.

Feel free to send a PR.