Gathering detailed insights and metrics for i18next-lite
Approximately 800 new packages are uploaded to the npm registry every day. This number can vary, but it reflects the active and growing nature of the JavaScript development community.
Installations
npm install i18next-liteScore
65.6
Supply Chain
98.1
Quality
79.1
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
2
Developer
SheikhAminul
Module System
BETA
CommonJS
Statistics
4 Stars
37 Commits
1 Watching
1 Branches
2 Contributors
Updated on 30 Oct 2024
Languages
TypeScript (100%)
Total Downloads
Cumulative downloads
Total Downloads
3,518
Last day
0%
1
Compared to previous day
Last week
-89.8%
12
Compared to previous week
Last month
155%
153
Compared to previous month
Last year
-20%
1,564
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Dev Dependencies
2
Versions
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
- 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
1npm i i18next-lite
Usage
A minimal example of implementing 3 languages with the ability to switch languages. Try/run this live on CodeSandbox.
1import { createRoot } from 'react-dom/client' 2import { TranslationProvider, useTranslate, useTranslatorConfigurer } from 'i18next-lite' 3 4const translations = { 5 en: { 6 translation: { 7 hello: 'Hello {{userName}}', 8 good_morning: 'Good morning.', 9 how_are_you: 'How are you today?' 10 } 11 }, 12 es: { 13 translation: { 14 hello: 'Hola {{userName}}', 15 good_morning: 'Buenos dias.', 16 how_are_you: '¿Cómo estás hoy?' 17 } 18 }, 19 bn: { 20 translation: { 21 hello: 'হ্যালো {{userName}}', 22 good_morning: 'সুপ্রভাত.', 23 how_are_you: 'আপনি আজ কেমন আছেন?' 24 } 25 } 26} 27 28function App() { 29 return ( 30 <TranslationProvider translations={translations} defaultLanguage='en'> 31 <ExampleComponent /> 32 </TranslationProvider> 33 ) 34} 35 36function ExampleComponent() { 37 const translate = useTranslate() 38 return ( 39 <div> 40 <h2>{translate('hello', { userName: 'John Doe' })}</h2> 41 <h3> 42 {translate('good_morning')} 43 <br /> 44 {translate('how_are_you')} 45 </h3> 46 <ExampleLanguageSwitcher /> 47 </div> 48 ) 49} 50 51function ExampleLanguageSwitcher() { 52 const configure = useTranslatorConfigurer(); 53 return ( 54 <div> 55 <div>Select language:</div> 56 <div> 57 <span onClick={() => configure({ language: 'en' })}>English</span> | 58 <span onClick={() => configure({ language: 'es' })}>Spanish</span> | 59 <span onClick={() => configure({ language: 'bn' })}>Bangla</span> 60 </div> 61 </div> 62 ) 63} 64 65const rootElement = document.getElementById('root') 66const root = createRoot(rootElement) 67 68root.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:
1function App() { 2 return ( 3 <TranslationProvider 4 translations={translations} 5 defaultLanguage='en' 6 language='es' 7 > 8 ... 9 </TranslationProvider> 10 ) 11}
useTranslate (hook):
In your React components, you can use the useTranslate hook to get the translate function.
1const 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:
1{ 2 "greeting_message": "Hi {{userName}}. You have {{totalUnread}} messages." 3}
Example:
1translate("greeting_message", { userName: "Mr. White", totalUnread: 5 }) 2// → "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.
1const 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:
1const configure = useTranslatorConfigurer() 2configure({ 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.
1const translations = { 2 ...require('../src/locales/en.json'), 3 ...require('../src/locales/es.json'), 4 ...require('../src/locales/bn.json') 5}
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 |
No vulnerabilities found.
No security vulnerabilities found.