{"id":14975315,"url":"https://github.com/eugenemeles/laravel-react-i18n","last_synced_at":"2025-07-11T16:35:47.695Z","repository":{"id":57748702,"uuid":"523481925","full_name":"EugeneMeles/laravel-react-i18n","owner":"EugeneMeles","description":"Allows to connect your `Laravel` Framework translation files with `React`.","archived":false,"fork":false,"pushed_at":"2024-10-01T22:52:08.000Z","size":497,"stargazers_count":98,"open_issues_count":10,"forks_count":10,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-07-05T20:50:24.817Z","etag":null,"topics":["javascript","laravel","laravel-framework","react","typescript"],"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/EugeneMeles.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2022-08-10T20:05:21.000Z","updated_at":"2025-06-20T12:30:03.000Z","dependencies_parsed_at":"2024-06-21T17:52:59.812Z","dependency_job_id":"526d513c-737a-4891-a005-8b55be9efb96","html_url":"https://github.com/EugeneMeles/laravel-react-i18n","commit_stats":{"total_commits":23,"total_committers":4,"mean_commits":5.75,"dds":"0.17391304347826086","last_synced_commit":"d38e67321e7caeb1035d038169b1674cb12f80a9"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/EugeneMeles/laravel-react-i18n","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EugeneMeles%2Flaravel-react-i18n","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EugeneMeles%2Flaravel-react-i18n/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EugeneMeles%2Flaravel-react-i18n/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EugeneMeles%2Flaravel-react-i18n/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EugeneMeles","download_url":"https://codeload.github.com/EugeneMeles/laravel-react-i18n/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EugeneMeles%2Flaravel-react-i18n/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264851864,"owners_count":23673314,"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":["javascript","laravel","laravel-framework","react","typescript"],"created_at":"2024-09-24T13:51:51.633Z","updated_at":"2025-07-11T16:35:47.675Z","avatar_url":"https://github.com/EugeneMeles.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\" style=\"border:none !important\"\u003e\n    Laravel React i18n\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/EugeneMeles/laravel-react-i18n/actions\"\u003e\u003cimg alt=\"GitHub Workflow Status (master)\" src=\"https://img.shields.io/github/workflow/status/EugeneMeles/laravel-react-i18n/Tests/main\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/laravel-react-i18n\"\u003e\u003cimg alt=\"License\" src=\"https://img.shields.io/npm/l/laravel-react-i18n.svg?sanitize=true\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/laravel-react-i18n\"\u003e\u003cimg alt=\"Version\" src=\"https://img.shields.io/npm/v/laravel-react-i18n.svg\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/laravel-react-i18n\"\u003e\u003cimg alt=\"Total Downloads\" src=\"https://img.shields.io/npm/dt/laravel-react-i18n.svg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cb\u003elaravel-react-i18n\u003c/b\u003e is a \u003cb\u003eReact\u003c/b\u003e plugin that allows to connect your \u003cb\u003eLaravel\u003c/b\u003e Framework translation\n    files with \u003cb\u003eReact\u003c/b\u003e. It uses the same logic used on \u003ca href=\"https://laravel.com/docs/8.x/localization\"\u003eLaravel Localization\u003c/a\u003e.\n\u003c/p\u003e\n\n## Demo\n[laravel-react-i18n-playground](https://github.com/EugeneMeles/laravel-react-i18n-playground)\n\n## Requirements\n- Laravel \u003e= 9\n- NodeJS \u003e= 16\n- Vite\n\n## Installation\n\nWith [npm](https://www.npmjs.com):\n```sh\nnpm i laravel-react-i18n\n```\n\nor with [yarn](https://yarnpkg.com):\n```sh\nyarn add laravel-react-i18n\n```\n\n## Setup\n\n\n#### CSR (Client Side Rendering)\n\n`app.tsx:`\n\n```tsx\nimport './bootstrap';\nimport '../css/app.css';\n\nimport { createRoot } from 'react-dom/client';\nimport { createInertiaApp } from '@inertiajs/react';\nimport { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';\nimport { LaravelReactI18nProvider } from 'laravel-react-i18n';\n\nconst appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';\n\ncreateInertiaApp({\n  title: (title) =\u003e `${title} - ${appName}`,\n  resolve: (name) =\u003e resolvePageComponent(`./Pages/${name}.tsx`, import.meta.glob('./Pages/**/*.tsx')),\n  setup({ el, App, props }) {\n    const root = createRoot(el);\n\n    root.render(\n      \u003cLaravelReactI18nProvider\n        locale={'uk'}\n        fallbackLocale={'en'}\n        files={import.meta.glob('/lang/*.json')}\n      \u003e\n        \u003cApp {...props} /\u003e\n      \u003c/LaravelReactI18nProvider\u003e\n    );\n  },\n  progress: {\n    color: '#4B5563',\n  },\n});\n\n```\n\n#### SSR (Server Side Rendering)\n\n`ssr.tsx:`\n\n```tsx\nimport ReactDOMServer from 'react-dom/server';\nimport { createInertiaApp } from '@inertiajs/react';\nimport createServer from '@inertiajs/react/server';\nimport { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';\nimport route from '../../vendor/tightenco/ziggy/dist/index.m';\nimport { LaravelReactI18nProvider } from 'laravel-react-i18n';\n\nconst appName = 'Laravel';\n\ncreateServer((page) =\u003e\n  createInertiaApp({\n    page,\n    render: ReactDOMServer.renderToString,\n    title: (title) =\u003e `${title} - ${appName}`,\n    resolve: (name) =\u003e resolvePageComponent(`./Pages/${name}.tsx`, import.meta.glob('./Pages/**/*.tsx')),\n    setup: ({ App, props }) =\u003e {\n      global.route = (name, params, absolute) =\u003e\n        route(name, params, absolute, {\n          // @ts-expect-error\n          ...page.props.ziggy,\n          // @ts-expect-error\n          location: new URL(page.props.ziggy.location),\n        });\n\n      return (\n        \u003cLaravelReactI18nProvider\n          locale={'uk'}\n          fallbackLocale={'en'}\n          files={import.meta.glob('/lang/*.json', { eager: true })}\n        \u003e\n          \u003cApp {...props} /\u003e\n        \u003c/LaravelReactI18nProvider\u003e\n      );\n    },\n  })\n);\n\n```\n\n#### PHP Translations Available on React\n\nIn order to load `php` translations, you can use this `Vite` plugin.\n\n`vite.config.js:`\n\n```js\nimport i18n from 'laravel-react-i18n/vite'; // \u003c-- add this\n\nexport default defineConfig({\n    plugins: [\n        laravel([\n            'resources/css/app.css',\n            'resources/js/app.js'\n        ]),\n        react(),\n        i18n(), // \u003c-- add this\n    ],\n});\n```\n\n\u003e During the `npm run dev` execution time, the plugin will create some files like this `php_{lang}.json` on your lang folder.\n\u003e And to avoid that to be commited to your code base, I suggest to your `.gitignore` this like:\n\n```\nlang/php_*.json\n```\n\n## Usage\n\n\n### Provider Options\n\n- `locale` *(optional)*: If not provided it will try to find from the `\u003chtml lang=\"\"\u003e` tag or set `en`.\n- `fallbackLocale` *(optional)*: If the `locale` was not provided or is invalid, it will try reach for this `fallbackLocale` instead, default it will try to find from the `\u003chtml lang=\"\"\u003e` tag or set `en`.\n- `files` *(required)*: The way to reach your language files.\n\n```js\n\u003cLaravelReactI18nProvider\n  locale={'ro'}\n  files={import.meta.glob('/lang/*.json')}\n\u003e\n...\n``` \n\n### Hook Response:\n```tsx\n...\nimport { useLaravelReactI18n } from 'laravel-react-i18n';\n\nexport default function Component() {\n    const { t, tChoice, currentLocale, setLocale, getLocales, isLocale, loading } = useLaravelReactI18n();\n    ...\n}\n\n```\n\n### `t(key: string, replacements?: {[key: string]: string | number})`\n\nThe `t()` method can translate a given message.\n\n`lang/pt.json:`\n```json\n{\n    \"Welcome!\": \"Bem-vindo!\",\n    \"Welcome, :name!\": \"Bem-vindo, :name!\"\n}\n```\n\n`welcome.tsx:`\n```tsx\n...\nconst { t } = useLaravelReactI18n();\n\nt('Welcome!'); // Bem-vindo!\nt('Welcome, :name!', { name: 'Francisco' }); // Bem-vindo Francisco!\nt('Welcome, :NAME!', { name: 'Francisco' }); // Bem-vindo FRANCISCO!\nt('Some untranslated'); // Some untranslated\n...\n```\n\n### `tChoice(key: string, count: number, replacements?: {[key: string]: string | number})`\n\nThe `tChoice()` method can translate a given message based on a count,\nthere is also available an `trans_choice` alias, and a mixin called `$tChoice()`.\n\n`lang/pt.json:`\n```json\n{\n  \"There is one apple|There are many apples\": \"Existe uma maça|Existe muitas maças\",\n  \"{0} There are none|[1,19] There are some|[20,*] There are many\": \"Não tem|Tem algumas|Tem muitas\",\n  \"{1} :count minute ago|[2,*] :count minutes ago\": \"{1} há :count minuto|[2,*] há :count minutos\",\n}\n```\n\n`choice.tsx:`\n```tsx\n...\nconst { tChoice } = useLaravelReactI18n()\n\ntChoice('There is one apple|There are many apples', 1); // Existe uma maça\ntChoice('{0} There are none|[1,19] There are some|[20,*] There are many', 19); // Tem algumas\ntChoice('{1} :count minute ago|[2,*] :count minutes ago', 10); // Há 10 minutos.\n...\n```\n\n### `currentLocale()`\n\nThe `currentLocale()` returns the locale that is currently being used.\n\n```tsx\nconst { currentLocale } = useLaravelReactI18n()\n\ncurrentLocale(); // en\n```\n\n### `setLocale(locale: string)`\n\nThe `setLocale()` can be used to change the locale during the runtime.\n\n```tsx\nconst { currentLocale, setLocale } = useLaravelReactI18n();\n\nfunction handler() {\n    setLocale('it')\n}\n\nreturn (\n    \u003cdiv\u003e\n        \u003ch1\u003eCurrent locale: `{currentLocale()}`\u003c/h1\u003e\n        \u003cbutton onClick={handler}\u003eChange locale to `it`\u003c/button\u003e\n    \u003c/div\u003e\n)\n```\n\n### `getLocales()`\n\nThe `getLocales()` return string array with all locales available in folder `/lang/*`.\n\n```text\n/lang/..\n  de.json\n  en.json\n  nl.json\n  uk.json\n```\n\n`myLocales.tsx:`\n```tsx\nconst { getLocales } = useLaravelReactI18n();\n\ngetLocales(); // ['de', 'en', 'nl', 'uk']\n```\n\n### `isLocale(locale: string)`\n\nThe `isLocale()` method checks the locale is available in folder `/lang/*`.\n\n```tsx\nconst { isLocale } = useLaravelReactI18n();\n\nisLocale('uk'); // true\nisLocale('fr'); // false\n```\n\n### `loading`\n\nThe `loading` show current loading state, only on client side where you change the locale.\n\n```tsx\nconst { loading, currentLocale, setLocale } = useLaravelReactI18n();\n\nfunction handler() {\n    setLocale('it')\n}\n\nif (loading) return \u003cp\u003eLoading...\u003c/p\u003e;\n\nreturn (\n    \u003cdiv\u003e\n        \u003ch1\u003eCurrent locale: `{currentLocale()}`\u003c/h1\u003e\n        \u003cbutton onClick={handler}\u003eChange locale to `it`\u003c/button\u003e\n    \u003c/div\u003e\n)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feugenemeles%2Flaravel-react-i18n","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feugenemeles%2Flaravel-react-i18n","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feugenemeles%2Flaravel-react-i18n/lists"}