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.
- 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.)
npm i i18next-lite
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 />)
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>
)
}
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."
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 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')
}
You are welcome to contribute! If you are adding a feature or fixing a bug, please contribute to the GitHub repository.
i18next-lite is licensed under the MIT license.
@SheikhAminul |