Gathering detailed insights and metrics for react-i18n-translation
Gathering detailed insights and metrics for react-i18n-translation
Installations
npm install react-i18n-translationDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
22.15.0
NPM Version
11.3.0
Releases
Unable to fetch releases
Languages
1
JavaScript
JavaScript (100%)
Developer
rtsdeveloper
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
10 Commits
1 Watchers
1 Branches
1 Contributors
Updated on Apr 26, 2025
Maintainers
1
Package Meta Information
Latest Version
1.0.12
Package Id
react-i18n-translation@1.0.12
Unpacked Size
7.65 kB
Size
2.70 kB
File Count
6
NPM Version
11.3.0
Node Version
22.15.0
Published on
Apr 26, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Dev Dependencies
4
react-i18n-translation
react-i18n-translation is a lightweight React library designed for internationalization and translation management in React applications. It provides a simple and efficient way to handle multilingual content in React and Next.js projects.
Features
- Easy integration with React and Next.js.
- Lightweight and simple API.
- Dynamic language switching.
- Support for RTL (Right-to-Left) languages.
Installation
Install the library using npm or yarn:
1npm install react-i18n-translation 2# or 3yarn add react-i18n-translation
Usage
NextJS Setup
Wrap your application with the LangWrapper to manage the language context:
1import { cookies } from "next/headers"; 2import { LangWrapper } from "react-i18n-translation"; 3 4export const metadata = { 5 title: "Lang Switcher", 6 description: "An example app with language translation", 7}; 8 9export default async function RootLayout({ children }) { 10 const cookieStore = await cookies(); 11 const initialLang = cookieStore.get("lang")?.value || "en"; 12 const dir = initialLang === "ar" ? "rtl" : "ltr"; 13 14 return ( 15 <html lang={initialLang} dir={dir}> 16 <body> 17 <LangWrapper initialLang={initialLang}>{children}</LangWrapper> 18 </body> 19 </html> 20 ); 21}
ReactJS Setup
Wrap your application with the LangWrapper to manage the language context:
1 2import React from "react"; 3import ReactDOM from "react-dom/client"; 4import Cookies from 'js-cookie'; 5import { LangWrapper } from "react-i18n-translation"; 6import App from "./App"; 7 8const initialLang = Cookies.get('lang') || "en"; 9const dir = initialLang === "ar" ? "rtl" : "ltr"; 10 11const root = ReactDOM.createRoot(document.getElementById("root")); 12root.render( 13 <LangWrapper initialLang={initialLang} dir={dir}> 14 <App /> 15 </LangWrapper> 16);
Language Dropdown
A component that provides a dropdown for language selection. It automatically updates the language in the context.
1"use client"; 2 3import React, { useContext } from "react"; 4import { LangContext } from "react-i18n-translation"; 5 6const LanguageDropdown = () => { 7 const { lang, setLang } = useContext(LangContext); 8 9 const handleChange = (e) => { 10 setLang(e.target.value); 11 }; 12 13 return ( 14 <select value={lang} onChange={handleChange}> 15 <option value="en">English</option> 16 <option value="ar">Arabic</option> 17 <option value="de">German</option> 18 </select> 19 ); 20}; 21 22export default LanguageDropdown;
Using Translations
Fetch translations using the useTranslation hook.
1import React from "react"; 2import { useTranslation } from "react-i18n-translation"; 3import { langFiles } from "@/translation/langFiles"; 4import en from "../translation/en.json"; 5import ar from "../translation/ar.json"; 6 7export const langFiles = { en, ar }; 8 9const Home = () => { 10 const { t } = useTranslation(langFiles); 11 12 return ( 13 <div> 14 <LanguageDropdown /> 15 <h1>{t("welcome")}</h1> 16 <p>{t("goodbye")}</p> 17 </div> 18 ); 19}; 20 21export default Home;
Translation Files
Create JSON files for each language. For example:
en.json
1{ 2 "welcome": "Welcome", 3 "goodbye": "Goodbye" 4}
ar.json
1{ 2 "welcome": "أهلا بك", 3 "goodbye": "مع السلامة" 4}
langFiles Function
1import en from "../translation/en.json"; 2import ar from "../translation/ar.json"; 3 4export const langFiles = { en, ar };
Include these files in your project and pass them to langFiles in LangProvider.
API Reference
LangProvider
Wraps the application and provides language context.
| Prop | Type | Default | Description |
|---|---|---|---|
initialLang | string | "en" | Initial language to set. |
useTranslation
A hook to fetch translations.
| Function | Description |
|---|---|
t(key) | Returns the translated string for the key. |
Peer Dependencies
Ensure your project has the following dependencies installed:
react(v17.0.0 or later)react-dom(v17.0.0 or later)
Contributing
Contributions are welcome! If you find a bug or have a feature request, feel free to create an issue or submit a pull request.
License
This project is licensed under the ISC License.
Author
RTS_Dev
No vulnerabilities found.
No security vulnerabilities found.