React

Use the React entry point to access Laravel translations inside Inertia React pages and components.

The package reads translations from page.props.lang, then gives you two helpers:

• __() for simple lookups
• trans() for placeholder replacement

Import the helper

import { lang } from '@erag/lang-sync-inertia/react'

const { trans, __ } = lang()

Full example

DashboardController.php

<?php

namespace App\Http\Controllers;

use Inertia\Inertia;
use Inertia\Response;

class DashboardController extends Controller
{
    public function index(): Response
    {
        syncLangFiles('auth');

        return Inertia::render('Dashboard');
    }
}

lang/en/auth.php

return [
    'greeting' => 'Hello!',
    'welcome' => 'Welcome, {name}!',
];

js/Pages/Dashboard.tsx

import { lang } from '@erag/lang-sync-inertia/react'

export default function Dashboard() {
  const { trans, __ } = lang()

  return (
    <section>
      <h1>{__('auth.greeting')}</h1>
      <p>{trans('auth.welcome', { name: 'John' })}</p>
    </section>
  )
}

Output

Hello!
Welcome, John!

Component example

import { lang } from '@erag/lang-sync-inertia/react'

export default function Login() {
  const { trans, __ } = lang()

  return (
    <div>
      <h1>{__('auth.greeting')}</h1>
      <p>{trans('auth.welcome', { name: 'Amit' })}</p>
    </div>
  )
}

How it works

1. Laravel loads lang/{locale}/auth.php with syncLangFiles('auth').
2. Inertia shares that data under page.props.lang.
3. lang() reads from those props inside your React component.
4. Keys like auth.greeting and auth.welcome resolve automatically.

trans() vs __()

Function	Best for	Description
trans()	Dynamic values	Use when passing placeholders like { name }
__()	Simple lookups	Shortcut for quick string access

__('auth.greeting')
// Hello!

trans('auth.welcome', { name: 'Amit' })
// Welcome, Amit!

Both helpers support placeholder replacement, but trans() is the clearer choice when replacements are always present.

Placeholder replacements

Always pass an object when you want {name} style placeholders replaced:

trans('auth.welcome', { name: 'Amit' })
__('auth.welcome', { name: 'Amit' })

If you pass a plain string instead:

__('auth.welcome', 'Amit')

The placeholder is not replaced.

Access raw Inertia props

If you need the full translation object directly in React:

import { usePage } from '@inertiajs/react'

const { lang } = usePage().props

Legacy API

The older React helper still works:

import { reactLang } from '@erag/lang-sync-inertia'

const { trans, __ } = reactLang()

Use @erag/lang-sync-inertia/react for new code.