https://github.com/zamarawka/i18n-lite

Modular, zero dependencies, tiny toolkit for i18n in react based apps.
https://github.com/zamarawka/i18n-lite

i18n react typescript

Last synced: about 18 hours ago
JSON representation

Modular, zero dependencies, tiny toolkit for i18n in react based apps.

• Host: GitHub
• URL: https://github.com/zamarawka/i18n-lite
• Owner: zamarawka
• License: mit
• Created: 2021-09-07T14:34:45.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2022-04-27T16:09:54.000Z (over 2 years ago)
• Last Synced: 2024-10-05T04:46:58.686Z (about 1 month ago)
• Topics: i18n, react, typescript
• Language: TypeScript
• Homepage:
• Size: 315 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Ci Status](https://github.com/zamarawka/i18n-lite/workflows/CI/badge.svg)](https://github.com/zamarawka/i18n-lite/actions)

[![Npm version](https://img.shields.io/npm/v/i18n-lite.svg?style=flat&logo=npm)](https://www.npmjs.com/package/i18n-lite)

[![React version](https://img.shields.io/npm/dependency-version/i18n-lite/peer/react.svg?style=flat&logo=react)](https://reactjs.org/)

# 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

```sh

npm install i18n-lite

```

# Usage

```tsx

// ./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 ipsum {{param}}',

  // ...

};

// Create I18n instance

const i18n = new I18n({

  lang: detectLang(),

  fallbackLng: 'en',

  resource: {

    en,

  },

});

i18n.on('langChange', langHandler);

function App() {

  return (

    

      

    

  );

}

export default App;

```

```tsx

// ./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 (

    


      {t('some', { param: 'here' })}

      


        {/* Way to interpolate components and values */}

         ,

            b: ,

          }}

          values={{

            param: 'bar',

          }}

        />

      

    

  );

}

```


# Development

```sh

npm run format # code fomatting

npm run lint # linting

npm run test # testing

```

Active maintenance with care and ❤️.

Feel free to send a PR.