https://github.com/damianstasik/react-lingua

A simple i18n engine for React.
https://github.com/damianstasik/react-lingua

i18n internationalization react translate translation

Last synced: 5 days ago
JSON representation

A simple i18n engine for React.

• Host: GitHub
• URL: https://github.com/damianstasik/react-lingua
• Owner: damianstasik
• License: mit
• Created: 2019-07-11T08:41:54.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T02:01:25.000Z (almost 2 years ago)
• Last Synced: 2023-09-19T16:28:38.398Z (about 1 year ago)
• Topics: i18n, internationalization, react, translate, translation
• Language: TypeScript
• Homepage:
• Size: 1.58 MB
• Stars: 2
• Watchers: 0
• Forks: 0
• Open Issues: 32
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-lingua ![Build](https://action-badges.now.sh/visualfanatic/react-lingua)

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

```jsx

// src/App.js

import * as 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 = () => (

   console.log(`Changed from ${prevLocale} to ${newLocale}`)}

  >

    

  

);

render(, document.getElementById('app'));

```

```jsx

// src/Main.js

import * as React from 'react';

import { Translation, useTranslation } from 'react-lingua';

export const Main = () => {

  const { t, locale, setLocale } = useTranslation();

  return (

    

      
{t('helloWorld')}

      
{t('welcome', { name: 'Dominika' })}

      


        {t('infoPart')}

          }}

        />

      

    

  );

};

```


## 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