{"id":15573054,"url":"https://github.com/marchintosh94/i18npro-react","last_synced_at":"2025-04-24T02:14:37.003Z","repository":{"id":225656999,"uuid":"707421799","full_name":"marchintosh94/i18nPro-react","owner":"marchintosh94","description":"I18nPro library implementation for React ecosystem","archived":false,"fork":false,"pushed_at":"2024-10-03T23:58:15.000Z","size":254,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-24T02:14:16.990Z","etag":null,"topics":["hacktoberfest","i18n","i18n-nextjs","i18n-react","i18next"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marchintosh94.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-19T21:36:04.000Z","updated_at":"2024-10-03T23:57:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"f04da56d-b2ff-470e-8664-9d6450e22374","html_url":"https://github.com/marchintosh94/i18nPro-react","commit_stats":{"total_commits":14,"total_committers":1,"mean_commits":14.0,"dds":0.0,"last_synced_commit":"d36a58d2f29d7c44a3f1a54fa80dc2f19eefcca9"},"previous_names":["marchintosh94/i18npro-react"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marchintosh94%2Fi18nPro-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marchintosh94%2Fi18nPro-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marchintosh94%2Fi18nPro-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marchintosh94%2Fi18nPro-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marchintosh94","download_url":"https://codeload.github.com/marchintosh94/i18nPro-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250546097,"owners_count":21448263,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","i18n","i18n-nextjs","i18n-react","i18next"],"created_at":"2024-10-02T18:10:18.515Z","updated_at":"2025-04-24T02:14:36.986Z","avatar_url":"https://github.com/marchintosh94.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv\u003e\n    \u003cimg src=\"./assets/i18nPro.png\" width=\"400\" style=\"display: inline;\"/\u003e\n    \u003cimg src=\"./assets/react.png\" style=\"display:inline;\" width=\"40\"/\u003e\n\u003c/div\u003e\n\n\u003ch1 style=\"width:100%;text-align:center;margin:3rem 0;\"\u003e@marchintosh94/i18n-pro-react\u003c/h1\u003e\n\n# I18nPro React\n\nI18nPro react is a React helper that provides functionalities for internationalization (i18n). It uses the [`i18nPro`](https://github.com/marchintosh94/i18nPro.git) library for the actual i18n operations.\n\n\n\n## 📄 Table of Contents\n\n1. [Installation](#installation)\n2. [i18nPro](#i18npro)\n3. [Usage](#usage)\n    - [i18nProProvider \u0026 i18nProContext](#i18nproprovider--i18nprocontext)\n        - [i18nProProvider Props](#i18nproprovider-props)\n        - [Example](#example)\n        - [Using the `useI18nProContext` context hook](#using-the-usei18nprocontext-context-hook)\n    - [useI18nPro](#usei18npro)\n    - [withI18nPro Higher-Order Component (WIP)](#withi18npro-higher-order-component-work-in-progress)\n1. [License](#license)\n\n## Installation\n\n```bash\nnpm install @marchintosh94/i18n-pro-react\n# or\nyarn add @marchintosh94/i18n-pro-react\n```\n\n## \u003cimg src=\"./assets/ts.png\" width=\"16\"/\u003e i18nPro\n\nThis is the main library that implements all core functionalities uesd by i18nPro React. \nRead more about core functionalities and how to use it\n### 🔗[I18nPro](https://github.com/marchintosh94/i18nPro.git)\n\n## Usage\n\n### i18nProProvider \u0026 i18nProContext\n\n`i18nProProvider` is a React component that provides the `i18nPro` instance to the rest of the application using the React Context API. It should be placed at the root of the component tree to ensure that all components have access to the `i18nPro` functionalities. \n\n`i18nProContext` is the React Context object that holds the `i18nPro` instance. It is used by the `useI18nPro` hook to access the `i18nPro` instance.\n\n#### i18nProProvider Props\n\n- `initialSetup`: The initial setup object for the `i18nPro` instance. This object should contain the following properties:\n    - `locale`: The default locale to use.\n    - `path`: The url to get translations or public path to the file containing the translation files. If not provided, you have to provide the `messages` object.\n    - `messages`: An object containing the translation messages for the default locale. If not provided, you have to provide the `path`.\n\n#### Example\n    \n```tsx\nimport React from 'react';\nimport { i18nProProvider } from '@marchintosh94/i18n-pro-react';\n\nconst initialSetup = {\n    locale: 'en',\n    path: 'http://localhost:3000/locales/en.json',\n};\n\nReactDOM.render(\n    \u003ci18nProProvider initialSetup={initialSetup}\u003e\n        \u003cApp /\u003e\n    \u003c/i18nProProvider\u003e,\n    document.getElementById('root')\n);\n```\n##### Using the `useI18nProContext` context hook\n\n```tsx\nimport React from 'react'\nimport { useI18nProContext } from '@marchintosh94/i18n-pro-react'\n\nconst MyComponent = () =\u003e {\n  const { locale, t, switchLoadLanguage } = useI18nProContext()\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003e{t('hello')}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e switchLoadLanguage('fr', { hello: 'Bonjour' })}\u003e\n        Switch to French\n      \u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### useI18nPro\n\n`useI18nPro` is a custom React hook that provides functionalities for internationalization (i18n). \n\n#### Return Object\n\nThe hook returns an object with the following properties:\n\n- `locale`: The current locale.\n- `t`: A function to translate a given key into the current locale.\n- `switchLoadLanguage`: A function to change the current language and load the new translations.\n- `updateExisitngLocale`: A function to update the current locale if it's available in the `i18nPro` library.\n\n#### `t(value: string, ...args): string`\n\nTranslates a given key into the current locale.\n\n##### Parameters\n\n- `value`: The key to translate.\n- `...args`: The arguments to pass to the `i18nPro.t` function.\n\n##### Return Value\n\nThe translated string.\n\n#### `switchLoadLanguage(...args): Promise\u003cstring\u003e`\n\nChanges the current language and loads the new translations.\n\n##### Parameters\n\n- `...args`: The arguments to pass to the `i18nPro.changeLanguage` function.\n\n##### Return Value\n\nA promise that resolves to the updated locale.\n\n#### `updateExisitngLocale(locale: string): string`\n\nUpdates the current locale if it's available in the `i18nPro` library.\n\n##### Parameters\n\n- `locale`: The locale to set.\n\n##### Return Value\n\nThe updated locale, or an empty string if the locale was not updated.\n\n### withI18nPro Higher-Order Component (Work in progress)\n\n`withI18nPro` is a higher-order component (HOC) that enhances a component with `i18nPro` functionality. It uses the `useI18nPro` hook to provide internationalization (i18n) capabilities to the wrapped component.\n\n#### Parameters\n\n- `WrappedComponent`: The component to be wrapped. This component will receive all the props of the original component, along with the additional props provided by the `useI18nPro` hook.\n\n#### Return Value\n\nThe HOC returns a new component that renders the `WrappedComponent` with the additional `i18nPro` props. The returned component accepts all the props of the `WrappedComponent`, except for the props provided by the `useI18nPro` hook.\n\n\n## License\n\nThis project is licensed under the [MIT License](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarchintosh94%2Fi18npro-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarchintosh94%2Fi18npro-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarchintosh94%2Fi18npro-react/lists"}