Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eugenemeles/laravel-react-i18n
Allows to connect your `Laravel` Framework translation files with `React`.
https://github.com/eugenemeles/laravel-react-i18n
javascript laravel laravel-framework react typescript
Last synced: about 1 month ago
JSON representation
Allows to connect your `Laravel` Framework translation files with `React`.
- Host: GitHub
- URL: https://github.com/eugenemeles/laravel-react-i18n
- Owner: EugeneMeles
- License: mit
- Created: 2022-08-10T20:05:21.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-10-01T22:52:08.000Z (about 2 months ago)
- Last Synced: 2024-10-10T12:44:26.910Z (about 1 month ago)
- Topics: javascript, laravel, laravel-framework, react, typescript
- Language: TypeScript
- Homepage:
- Size: 485 KB
- Stars: 62
- Watchers: 4
- Forks: 7
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Laravel React i18n
laravel-react-i18n is a React plugin that allows to connect your Laravel Framework translation
files with React. It uses the same logic used on Laravel Localization.
## Demo
[laravel-react-i18n-playground](https://github.com/EugeneMeles/laravel-react-i18n-playground)
## Requirements
- Laravel >= 9
- NodeJS >= 16
- Vite
## Installation
With [npm](https://www.npmjs.com):
```sh
npm i laravel-react-i18n
```
or with [yarn](https://yarnpkg.com):
```sh
yarn add laravel-react-i18n
```
## Setup
#### CSR (Client Side Rendering)
`app.tsx:`
```tsx
import './bootstrap';
import '../css/app.css';
import { createRoot } from 'react-dom/client';
import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { LaravelReactI18nProvider } from 'laravel-react-i18n';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.tsx`, import.meta.glob('./Pages/**/*.tsx')),
setup({ el, App, props }) {
const root = createRoot(el);
root.render(
);
},
progress: {
color: '#4B5563',
},
});
```
#### SSR (Server Side Rendering)
`ssr.tsx:`
```tsx
import ReactDOMServer from 'react-dom/server';
import { createInertiaApp } from '@inertiajs/react';
import createServer from '@inertiajs/react/server';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import route from '../../vendor/tightenco/ziggy/dist/index.m';
import { LaravelReactI18nProvider } from 'laravel-react-i18n';
const appName = 'Laravel';
createServer((page) =>
createInertiaApp({
page,
render: ReactDOMServer.renderToString,
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.tsx`, import.meta.glob('./Pages/**/*.tsx')),
setup: ({ App, props }) => {
global.route = (name, params, absolute) =>
route(name, params, absolute, {
// @ts-expect-error
...page.props.ziggy,
// @ts-expect-error
location: new URL(page.props.ziggy.location),
});
return (
);
},
})
);
```
#### PHP Translations Available on React
In order to load `php` translations, you can use this `Vite` plugin.
`vite.config.js:`
```js
import i18n from 'laravel-react-i18n/vite'; // <-- add this
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js'
]),
react(),
i18n(), // <-- add this
],
});
```
> During the `npm run dev` execution time, the plugin will create some files like this `php_{lang}.json` on your lang folder.
> And to avoid that to be commited to your code base, I suggest to your `.gitignore` this like:
```
lang/php_*.json
```
## Usage
### Provider Options
- `locale` *(optional)*: If not provided it will try to find from the `` tag or set `en`.
- `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 `` tag or set `en`.
- `files` *(required)*: The way to reach your language files.
```js
...
```
### Hook Response:
```tsx
...
import { useLaravelReactI18n } from 'laravel-react-i18n';
export default function Component() {
const { t, tChoice, currentLocale, setLocale, getLocales, isLocale, loading } = useLaravelReactI18n();
...
}
```
### `t(key: string, replacements?: {[key: string]: string | number})`
The `t()` method can translate a given message.
`lang/pt.json:`
```json
{
"Welcome!": "Bem-vindo!",
"Welcome, :name!": "Bem-vindo, :name!"
}
```
`welcome.tsx:`
```tsx
...
const { t } = useLaravelReactI18n();
t('Welcome!'); // Bem-vindo!
t('Welcome, :name!', { name: 'Francisco' }); // Bem-vindo Francisco!
t('Welcome, :NAME!', { name: 'Francisco' }); // Bem-vindo FRANCISCO!
t('Some untranslated'); // Some untranslated
...
```
### `tChoice(key: string, count: number, replacements?: {[key: string]: string | number})`
The `tChoice()` method can translate a given message based on a count,
there is also available an `trans_choice` alias, and a mixin called `$tChoice()`.
`lang/pt.json:`
```json
{
"There is one apple|There are many apples": "Existe uma maça|Existe muitas maças",
"{0} There are none|[1,19] There are some|[20,*] There are many": "Não tem|Tem algumas|Tem muitas",
"{1} :count minute ago|[2,*] :count minutes ago": "{1} há :count minuto|[2,*] há :count minutos",
}
```
`choice.tsx:`
```tsx
...
const { tChoice } = useLaravelReactI18n()
tChoice('There is one apple|There are many apples', 1); // Existe uma maça
tChoice('{0} There are none|[1,19] There are some|[20,*] There are many', 19); // Tem algumas
tChoice('{1} :count minute ago|[2,*] :count minutes ago', 10); // Há 10 minutos.
...
```
### `currentLocale()`
The `currentLocale()` returns the locale that is currently being used.
```tsx
const { currentLocale } = useLaravelReactI18n()
currentLocale(); // en
```
### `setLocale(locale: string)`
The `setLocale()` can be used to change the locale during the runtime.
```tsx
const { currentLocale, setLocale } = useLaravelReactI18n();
function handler() {
setLocale('it')
}
return (
Current locale: `{currentLocale()}`
Change locale to `it`
)
```
### `getLocales()`
The `getLocales()` return string array with all locales available in folder `/lang/*`.
```text
/lang/..
de.json
en.json
nl.json
uk.json
```
`myLocales.tsx:`
```tsx
const { getLocales } = useLaravelReactI18n();
getLocales(); // ['de', 'en', 'nl', 'uk']
```
### `isLocale(locale: string)`
The `isLocale()` method checks the locale is available in folder `/lang/*`.
```tsx
const { isLocale } = useLaravelReactI18n();
isLocale('uk'); // true
isLocale('fr'); // false
```
### `loading`
The `loading` show current loading state, only on client side where you change the locale.
```tsx
const { loading, currentLocale, setLocale } = useLaravelReactI18n();
function handler() {
setLocale('it')
}
if (loading) return
Loading...
;
return (
Current locale: `{currentLocale()}`
Change locale to `it`
)
```