EugeneMeles / laravel-react-i18n

Allows to connect your `Laravel` Framework translation files with `React`.
MIT License
75 stars 9 forks source link

Missing keySeparator prop #13

Closed selenasimicqs closed 1 year ago

selenasimicqs commented 1 year ago

Hello,

I started using laravel-react-i18n library for translation. I try to use nested keys, but with no success. t('sidebarItems.sidebarItem1') Does this library allows keys to be phrases (having :, .) ?

Thank you

EugeneMeles commented 1 year ago

Hi,

This library use same algorithm as in laravel.

Using Short Keys:

<?php

// lang/en/messages.php

return [
    'welcome' => 'Welcome to our application!',
    'some_else' => [
        'nestedMessage' => 'Nested Message',
    ],
];
t('messages.welcome'); // Welcome to our application!

t('messages.some_else.nestedMessage'); // Nested Message

Using Translation Strings As Keys:

// lang/nl.json

{
    "I love programming.": "Me encanta programar."
}
t('I love programming.'); // Me encanta programar.

more info at Localization

selenasimicqs commented 1 year ago

Hi, Thank you for your fast response! I'm react developer so I'm not so familiar with Laravel. Can you, please tell me how to define LaravelReactI18nProvider component so I can use translation from php files? ` <LaravelReactI18nProvider locale={'en'} fallbackLocale={'en'} files={import.meta.glob('/lang/*.php', { eager: true })}

` How I should setup meta.glob? Thank you

EugeneMeles commented 1 year ago

The provider does not directly request *.php files. You need to run preprocessing i18n() with vite-builder in vite.config.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
    ],
});
/lang
    /uk
        messages.php
        validate.php
        helper.php
        user.php

After this step you receive transpiled php-translate(array) to json object and save it in lang folder as /lang/php_uk.json and in LaravelReactI18nProvider files props receive only JSON file.

      <LaravelReactI18nProvider
        files={import.meta.glob('/lang/*.json')}
      >
        <App {...props} />
      </LaravelReactI18nProvider>

You can use(part with composer & npm) playground as example, this should be enough for front-end devs.

with this steps:

in root dir of project:

  1. cd ./laravel/
  2. npm install
  3. npm run dev
selenasimicqs commented 1 year ago

@EugeneMeles

Thank you! Now I'm understanding how this is working!

EugeneMeles commented 1 year ago

Hi,

Yes it's correct behavior(deleting php_*.json in lang folder) after stop dev server or finished build.

In dev mode we need physical folder request(like as /lang/*). But in production build, request goes to folder alias name(not true physical folder on server)