{"_id":"react-i18n-translation","_rev":"39-5b7b8c8dabaaafd504e19cd8e843ee01","name":"react-i18n-translation","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.0":{"name":"react-i18n-translation","version":"1.0.0","keywords":["i18n","ReactJS","NextJs"],"author":{"name":"RTS_Dev"},"license":"ISC","_id":"react-i18n-translation@1.0.0","maintainers":[{"name":"rts-developer","email":"sharmaritesh9794@gmail.com"}],"dist":{"shasum":"af4340bf6ae049abcdfe75601573fa345ab146da","tarball":"https://registry.npmjs.org/react-i18n-translation/-/react-i18n-translation-1.0.0.tgz","fileCount":4,"integrity":"sha512-XCeGFqWJOfGBRlqDpA6UIIi97VKbw1uzco+ATkhtDROEekb3G3ejD0wBhouykMCCNCa2EBWLb7khc681/SNeiw==","signatures":[{"sig":"MEQCICBZadvHe4DBSmTQGVAw75zNozeV4HjhHy1ULbdHUOmuAiA/SZVGF3jFj61h1xrYam7iCWMIYKP+PAxNMnB+eC31aQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956},"main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"babel src --out-dir dist"},"_npmUser":{"name":"rts-developer","email":"sharmaritesh9794@gmail.com"},"_npmVersion":"10.2.4","description":"\"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 projects.","directories":{},"_nodeVersion":"20.11.0","_hasShrinkwrap":false,"devDependencies":{"@babel/cli":"^7.26.4","@babel/core":"^7.26.0","@babel/preset-env":"^7.26.0","@babel/preset-react":"^7.26.3"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-i18n-translation_1.0.0_1735559336521_0.8196354186651647","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"react-i18n-translation","version":"1.2.0","keywords":["react-i18n","react-translation","internationalization","i18n","ReactJS","Next.js","multilingual","rtl-support","language-switcher","js-cookie"],"author":{"name":"RTS_Dev"},"license":"ISC","_id":"react-i18n-translation@1.2.0","maintainers":[{"name":"rts-developer","email":"sharmaritesh9794@gmail.com"}],"homepage":"https://github.com/rtsdeveloper/react-i18n-translation","bugs":{"url":"https://github.com/rtsdeveloper/react-i18n-translation/issues"},"dist":{"shasum":"eefa1644923e082b53e2dad745266e2c2b4e3033","tarball":"https://registry.npmjs.org/react-i18n-translation/-/react-i18n-translation-1.2.0.tgz","fileCount":11,"integrity":"sha512-sWsTUcPNptgBSjODgwRoZxHkFIUFiozaMP8zX+WycagtPjifhSlehXZFpcA4vUYeR6tqTvqeaAQ1f9gHQWe3TA==","signatures":[{"sig":"MEYCIQCfhYtvgFdYO+Nlfi39a2PMtIySDq1GcIVtUYWd9BkrwQIhAM8tCMgFDbypFRAd1xOc/f8nmC+7wU71vVwWvCka0z2e","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11293},"main":"dist/index.js","module":"dist/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"babel src --out-dir dist --extensions \".js,.jsx\" --copy-files","prepare":"yarn build"},"_npmUser":{"name":"rts-developer","email":"sharmaritesh9794@gmail.com"},"repository":{"url":"git+https://github.com/rtsdeveloper/react-i18n-translation.git","type":"git"},"description":"React-i18n-translation is a lightweight, easy-to-use internationalization (i18n) and translation management library for React and Next.js applications. Easily handle multilingual content, language switching, and RTL support in your React projects.","directories":{},"dependencies":{"js-cookie":"3.0.5"},"_hasShrinkwrap":false,"devDependencies":{"@babel/cli":"^7.26.4","@babel/core":"^7.26.0","@babel/preset-env":"^7.26.0","@babel/preset-react":"^7.26.3"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0 || ^19.0.0","react-dom":"^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-i18n-translation_1.2.0_1758481767908_0.357424579542831","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"react-i18n-translation","version":"2.0.0","description":"React-i18n-translation is a lightweight, easy-to-use internationalization (i18n) and translation management library for React and Next.js applications. Easily handle multilingual content, language switching, and RTL support in your React projects.","main":"dist/index.js","module":"dist/index.js","exports":{".":"./dist/index.js","./next":"./dist/next/index.js"},"scripts":{"build":"babel src --out-dir dist --extensions \".js,.jsx\" --copy-files","prepare":"yarn build","test":"echo \"Error: no test specified\" && exit 1"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0 || ^19.0.0","react-dom":"^17.0.0 || ^18.0.0 || ^19.0.0"},"dependencies":{"js-cookie":"3.0.5"},"devDependencies":{"@babel/cli":"^7.26.4","@babel/core":"^7.26.0","@babel/preset-env":"^7.26.0","@babel/preset-react":"^7.26.3"},"keywords":["react-i18n","react-translation","internationalization","i18n","ReactJS","Next.js","multilingual","rtl-support","language-switcher","js-cookie"],"author":{"name":"RTS_Dev"},"license":"ISC","repository":{"type":"git","url":"git+https://github.com/rtsdeveloper/react-i18n-translation.git"},"bugs":{"url":"https://github.com/rtsdeveloper/react-i18n-translation/issues"},"homepage":"https://github.com/rtsdeveloper/react-i18n-translation","gitHead":"868ac3624ac30f87ef7c9bc11c57a58b2a0f4fe3","_id":"react-i18n-translation@2.0.0","_nodeVersion":"25.8.1","_npmVersion":"11.11.0","dist":{"integrity":"sha512-0ZB0ialtCzusz2iLY+8QeUgld4WY7X99vv4RxZWHAABSTmG/LeBJZy7jFsq7BnJbw6Wl08uQMeyr9R7I9E/Meg==","shasum":"382e81affbaf23030610254ce037113db9477d87","tarball":"https://registry.npmjs.org/react-i18n-translation/-/react-i18n-translation-2.0.0.tgz","fileCount":9,"unpackedSize":23802,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIH1fuPZ4uqf3gcieFEZNyIfJYWXIByKsZ4c4uPpP7LvgAiBxbF/K9EyomSCqJRTGfS1tKiwUfiDEGFlP4hceil8PfA=="}]},"_npmUser":{"name":"rts-developer","email":"sharmaritesh9794@gmail.com"},"directories":{},"maintainers":[{"name":"rts-developer","email":"sharmaritesh9794@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-i18n-translation_2.0.0_1774945983712_0.6727928378548906"},"_hasShrinkwrap":false}},"time":{"created":"2024-12-30T11:48:56.415Z","modified":"2026-03-31T08:33:03.965Z","1.0.0":"2024-12-30T11:48:56.673Z","1.0.1":"2024-12-30T12:24:12.427Z","1.0.2":"2024-12-30T12:44:14.517Z","1.0.3":"2024-12-30T14:48:01.456Z","1.0.4":"2024-12-30T14:51:19.221Z","1.0.5":"2024-12-30T14:55:29.491Z","1.0.6":"2024-12-30T16:12:36.374Z","1.0.7":"2024-12-30T16:31:05.912Z","1.0.8":"2024-12-30T17:44:30.743Z","1.0.9":"2024-12-30T18:11:34.336Z","1.0.10":"2024-12-30T18:36:47.528Z","1.0.11":"2024-12-30T18:56:20.109Z","1.0.12":"2025-04-26T05:28:20.712Z","1.0.13":"2025-09-21T17:20:10.238Z","1.0.14":"2025-09-21T17:43:49.757Z","1.0.15":"2025-09-21T17:56:19.931Z","1.0.16":"2025-09-21T18:17:20.461Z","1.1.0":"2025-09-21T19:00:16.202Z","1.2.0":"2025-09-21T19:09:28.087Z","1.2.1":"2025-09-21T19:41:46.006Z","2.0.0":"2026-03-31T08:33:03.870Z"},"bugs":{"url":"https://github.com/rtsdeveloper/react-i18n-translation/issues"},"author":{"name":"RTS_Dev"},"license":"ISC","homepage":"https://github.com/rtsdeveloper/react-i18n-translation","keywords":["react-i18n","react-translation","internationalization","i18n","ReactJS","Next.js","multilingual","rtl-support","language-switcher","js-cookie"],"repository":{"type":"git","url":"git+https://github.com/rtsdeveloper/react-i18n-translation.git"},"description":"React-i18n-translation is a lightweight, easy-to-use internationalization (i18n) and translation management library for React and Next.js applications. Easily handle multilingual content, language switching, and RTL support in your React projects.","maintainers":[{"name":"rts-developer","email":"sharmaritesh9794@gmail.com"}],"readme":"# react-i18n-translation\n\n`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.js and Next.js projects.\n\n---\n\n## **Features**\n\n- Easy integration with React.js and Next.js.\n- Compatible with Next.js 13+ App Router (Server & Client Components).\n- Lightweight and simple API.\n- Dynamic language switching.\n- Support for RTL (Right-to-Left) languages.\n\n---\n\n## **Installation**\n\nInstall the library using npm or yarn:\n\n```bash\nnpm install react-i18n-translation\n# or\nyarn add react-i18n-translation\n```\n\n---\n\n## **Usage**\n\n### **ReactJS Setup**\n\nWrap your main.js file with the `LangWrapper` to manage the language context:\n\n```jsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport { LangWrapper, getClientLang } from \"react-i18n-translation\";\nimport { langFiles } from \"./translation/langFiles\"; // 1. Import your translations!\nimport App from \"./App\";\n\n// Reads the cookie naturally on the client, returning \"en\" or \"ar\" and text direction\nconst { lang, dir } = getClientLang();\n\nconst root = ReactDOM.createRoot(document.getElementById(\"root\"));\nroot.render(\n  // 2. Pass them globally to the wrapper!\n  <LangWrapper initialLang={lang} translations={langFiles}>\n    <App />\n  </LangWrapper>\n);\n```\n\n---\n\n### **Next.js (App Router) Setup**\n\nIn Next.js 13+ with the App Router (`app/layout.jsx`), you can rely on the newly added server-side helper `getServerLang` to keep your root layout perfectly clean, ensuring your page is natively rendered in the correct language for hydration and SEO.\n\n```jsx\nimport { LangWrapper } from \"react-i18n-translation\";\nimport { getServerLang } from \"react-i18n-translation/next\";\nimport { langFiles } from \"@/translation/langFiles\"; // 1. Import your translations!\n\nexport default async function RootLayout({ children }) {\n  // Reads the cookie naturally on the server via Next 15+ Async API\n  const { lang, dir } = await getServerLang();\n\n  return (\n    <html lang={lang} dir={dir}>\n      <body>\n        {/* 2. Pass them globally to the wrapper! */}\n        <LangWrapper initialLang={lang} translations={langFiles}>\n          {children}\n        </LangWrapper>\n      </body>\n    </html>\n  );\n}\n```\n\n---\n\n### **Language Dropdown**\n\nThe library provides a built-in, out-of-the-box dropdown component that automatically connects to the context. You can easily pass in your custom supported languages and fully customize it with CSS classes (like Tailwind) or inline styles!\n\n```jsx\nimport React from \"react\";\nimport { LanguageDropdown } from \"react-i18n-translation\";\n\nconst App = () => {\n  return (\n    <div>\n      <LanguageDropdown \n        // 1. Pass your languages \n        languages={[\n          { code: \"en\", label: \"English\" },\n          { code: \"ar\", label: \"Arabic\" },\n          { code: \"de\", label: \"German\" }\n        ]}\n        // 2. Add your custom classes for beautiful CSS styling\n        className=\"my-custom-dropdown tailwind-class-here\"\n        // 3. Or use inline styles!\n        style={{ padding: '8px', borderRadius: '4px', border: '1px solid #ccc' }}\n      />\n    </div>\n  );\n};\n\nexport default App;\n```\n\n---\n\n### **Using Translations**\n\nFetch translations using the `useTranslation` hook.\n\n```jsx\nimport React from \"react\";\nimport { useTranslation, LanguageDropdown } from \"react-i18n-translation\";\n\nconst App = () => {\n  // 3. Just call the hook smoothly anywhere in your app with zero arguments!\n  const { t } = useTranslation();\n\n  return (\n    <div>\n      <LanguageDropdown />\n      <h1>{t(\"welcome\")}</h1>\n      <p>{t(\"goodbye\")}</p>\n    </div>\n  );\n};\n\nexport default App;\n```\n\n---\n\n### **Next.js Considerations: Server vs Client Components**\n\nBy default, the `useTranslation()` hook internally uses React Context, which means it **must run in a Client Component**. \n\n**1. Translating inside Client Components:**\nSimply add `\"use client\";` to the top of the file and use the hook normally (No props needed!).\n\n```jsx\n\"use client\";\nimport { useTranslation } from \"react-i18n-translation\";\n\nexport default function Dashboard() {\n  const { t } = useTranslation();\n  return <h1>{t(\"welcome\")}</h1>;\n}\n```\n\n**2. Translating inside Server Components (Async):**\nIf you want to keep a component entirely on the server for maximum SEO, you cannot use hooks. Instead, pull the language natively from `getServerLang()`!\n\n```jsx\nimport { getServerLang } from \"react-i18n-translation/next\";\nimport { langFiles } from \"@/translation/langFiles\"; // Import JSON\n\nexport default async function ServerProfile() {\n  // Next 15+ uses async for cookies\n  const { lang } = await getServerLang(); \n  \n  // Directly pull the string using raw javascript!\n  const title = langFiles[lang]?.[\"profileTitle\"] || \"Profile\";\n\n  return <h1>{title}</h1>;\n}\n```\n\n---\n\n### **Translation Files**\n\nCreate JSON files for each language. For example:\n\n#### en.json\n\n```json\n{\n  \"welcome\": \"Welcome\",\n  \"goodbye\": \"Goodbye\"\n}\n```\n\n#### ar.json\n\n```json\n{\n  \"welcome\": \"أهلا بك\",\n  \"goodbye\": \"مع السلامة\"\n}\n```\n\n### **langFiles Function**\n\n```jsx\nimport en from \"../translation/en.json\";\nimport ar from \"../translation/ar.json\";\n\nexport const langFiles = { en, ar };\n```\n\nInclude these files in your project and pass them to `langFiles` in `LangProvider`.\n\n---\n\n## **API Reference**\n\n### **LangProvider**\n\nWraps the application and provides language context globally.\n\n| Prop         | Type   | Default | Description           |\n|--------------|--------|---------|-----------------------|\n| `initialLang` | string | `\"en\"` | Initial language to set. |\n| `translations`| object | `{}`   | The global object containing all language JSON files. |\n\n### **useTranslation**\n\nA hook to natively fetch translations without needing to import JSON files separately.\n\n| Function | Description                              |\n|----------|------------------------------------------|\n| `t(key)` | Returns the translated string for the dynamically active language. |\n\n---\n\n## **Peer Dependencies**\n\nEnsure your project has the following dependencies installed:\n\n- `react` (v17.0.0 or later)\n- `react-dom` (v17.0.0 or later)\n\n---\n\n## **Contributing**\n\nContributions are welcome! If you find a bug or have a feature request, feel free to create an issue or submit a pull request.\n\n---\n\n## **License**\n\nThis project is licensed under the ISC License.\n\n---\n\n## **Author**\n\nRTS_Dev","readmeFilename":"README.md"}