i18next-lite

i18next-lite

i18next-lite is a lightweight and super simple i18n/internationalization module for React.
Why this? i18next-lite is specially designed only for React. Developed using modern React APIs. It is super simple, lightweight, fast and provides the necessary APIs to implement multiple language support.

Table of Contents

• Features
• Install
• Usage
• Documentation
• Contributing
• License
• Author

Features

• Internationalization or implementation of multiple language support in React.
• Translation using predefined translations-library.
• Integrating dynamic values into translations.
• Loading translations dynamically from JSON data.
• Ability to change language without reloading the page.
• Automatic detection of system/browser language. (Automatically shows translation in the system/browser language if the system/browser language exists in the supplied translation data.)

Install

npm i i18next-lite

Usage

A minimal example of implementing 3 languages with the ability to switch languages. Try/run this live on CodeSandbox.

import { createRoot } from 'react-dom/client'
import { TranslationProvider, useTranslate, useTranslatorConfigurer } from 'i18next-lite'

const translations = {
    en: {
        translation: {
            hello: 'Hello {{userName}}',
            good_morning: 'Good morning.',
            how_are_you: 'How are you today?'
        }
    },
    es: {
        translation: {
            hello: 'Hola {{userName}}',
            good_morning: 'Buenos dias.',
            how_are_you: '¿Cómo estás hoy?'
        }
    },
    bn: {
        translation: {
            hello: 'হ্যালো {{userName}}',
            good_morning: 'সুপ্রভাত.',
            how_are_you: 'আপনি আজ কেমন আছেন?'
        }
    }
}

function App() {
    return (
        <TranslationProvider translations={translations} defaultLanguage='en'>
            <ExampleComponent />
        </TranslationProvider>
    )
}

function ExampleComponent() {
    const translate = useTranslate()
    return (
        <div>
            <h2>{translate('hello', { userName: 'John Doe' })}</h2>
            <h3>
                {translate('good_morning')}
                <br />
                {translate('how_are_you')}
            </h3>
            <ExampleLanguageSwitcher />
        </div>
    )
}

function ExampleLanguageSwitcher() {
    const configure = useTranslatorConfigurer();
    return (
        <div>
            <div>Select language:</div>
            <div>
                <span onClick={() => configure({ language: 'en' })}>English</span> |
                <span onClick={() => configure({ language: 'es' })}>Spanish</span> |
                <span onClick={() => configure({ language: 'bn' })}>Bangla</span>
            </div>
        </div>
    )
}

const rootElement = document.getElementById('root')
const root = createRoot(rootElement)

root.render(<App />)

Documentation

TranslationProvider:

The props of the TranslationProvider component:

• translations - Required. Your translation data (in JSON format) for different languages.
• defaultLanguage - Optional. The defaultLanguage will be used if the detected browser language does not exist in your translation data. So make sure the defaultLanguage exists in your translation data.
• language - Optional. The language to use. If a valid language is passed, it will use that language and ignore the detected system/browser language.

Example:

function App() {
    return (
        <TranslationProvider
            translations={translations}
            defaultLanguage='en'
            language='es'
        >
            ...
        </TranslationProvider>
    )
}

useTranslate (hook):

In your React components, you can use the useTranslate hook to get the translate function.

const translate = useTranslate()

The parameters of the translate function:

• key - Required. The key for a translation that was used in the translation data object.
• substitutions - Optional. Passes dynamic values in the translation.

For substitution, the keys are surrounded by curly brackets:

{
    "greeting_message": "Hi {{userName}}. You have {{totalUnread}} messages."
}

Example:

translate("greeting_message", { userName: "Mr. White", totalUnread: 5 })
// → "Hi Mr. White. You have 5 messages."

useTranslatorConfigurer (hook):

In your React components, you can use the useTranslatorConfigurer hook to get the translator configure function. You can change the language or set the translations dynamically using this function.

const configure = useTranslatorConfigurer()

You can pass the following keys to the parameter of the configure function:

• translations - Optional. Your translation data (in JSON format) for different languages.
• language - Optional. The language to use.

To change language:

const configure = useTranslatorConfigurer()
configure({ language: 'en' }) // Changes language to English.

Load/Import from JSON:

Load/import translation data from one more JSON files. Check this CodeSandbox example for detailed instructions and file/folder structure.

const translations = {
	...require('../src/locales/en.json'),
	...require('../src/locales/es.json'),
	...require('../src/locales/bn.json')
}

Contributing

You are welcome to contribute! If you are adding a feature or fixing a bug, please contribute to the GitHub repository.

License

i18next-lite is licensed under the MIT license.

Author

@SheikhAminul