How to define messages with react-i18next? about react-boilerplate-cra-template HOT 7 CLOSED

I didn't understand much? Can you give an example on 'defining a message'? THere are json files and used with syntax similar to react-intl if thats what you mean?

from react-boilerplate-cra-template.

Oh, sorry for making you confused by unclear description!

I meant, how we define the message inputs for extracting to json file more structure?

In this react-boilerplate, we define all messages in messages.js for each page/component. Then, run command to extract them to json files.

yarn extract-intl

It is quite easier to handle messages because I just need to define and find them in messages.js files when needed.

In this react-boilerplate-cra-template, I see that we define messages in .tsx file directly. So, I'd like to know if we have a way to define messages in messages.js file with react-i18next such as react-intl? @Can-Sahin

from react-boilerplate-cra-template.

Well you define messages in JSON files like react-intl and you use them in ts or js files(doesn't matter the type) like here. There is no file similar to message.js. All the translations are available through hooks. Its highly customizable anyway. You can divide your messages in the nested structures or load them through a backend server or have your backend get called with missing translations etc etc...

If you want to extract message there are these options you can try. Extracting messages aren't implemented here.

from react-boilerplate-cra-template.

Thanks @Can-Sahin!

I'm looking forward extracting messages feature is implemented if possible in future.

from react-boilerplate-cra-template.

After a while of researching. I'd give my way to someone wanna define messages in such a messages.js. BTW, I'm using i18nxt-scanner to extract the messages to JSON file.

i18next-scanner.config.js

module.exports = {
  input: [
    'src/app/**/*.{js,jsx}',
    // Use ! to filter out files or directories
    '!app/**/*.spec.{js,jsx}',
    '!app/i18n/**',
    '!**/node_modules/**',
  ],
  output: './',
  options: {
    debug: true,
    removeUnusedKeys: true,
    func: {
      list: ['getTranslationId'],
      extensions: ['.js', '.tsx'],
    },
    lngs: ['en', 'ko'],
    ns: ['translation'],
    defaultLng: 'en',
    defaultNs: 'translation',
    defaultValue: '',
    resource: {
      loadPath: 'src/locales/{{lng}}/{{ns}}.json',
      savePath: 'src/locales/{{lng}}/{{ns}}.json',
      jsonIndent: 2,
      lineEnding: '\n',
    },
    nsSeparator: false, // namespace separator
    keySeparator: false, // key separator
    interpolation: {
      prefix: '{{',
      suffix: '}}',
    },
  },
};

messages.js

import { getTranslationId } from 'locales/utils';

const messages = {
  title: getTranslationId('Homepage_title', {
    defaultValue: 'hello, {{name}}',
  }),
  count: getTranslationId('Homepage_count', {
    defaultValue: '{{count}} time',
    count: 0, // for plurals
  }),
};

export default messages;

locales/utils.js

export const getTranslationId = id => {
  if (!id || !id.includes('_'))
    throw new Error('ID pattern should be "BLOCK_ElEMENT"');
  return id;
};

Extracting command

yarn run i18next-scanner

Hope this helps! :D

from react-boilerplate-cra-template.

Can you share more details on this? I am trying to implement the i18next-scanner but without using string approach (which sacrifices the compile time safety) its pretty hard to implement something.

Whats the getTranslationId? Is there any source code open sources I can see?

from react-boilerplate-cra-template.

Well, that is my custom function (it was also included in my previous comment) which gives i18next-scanner a clue when it's scanning messages. You can see that I modified the i18next-scanner.config.js file also to adapt for this purpose. @Can-Sahin

list: ['getTranslationId'],

from react-boilerplate-cra-template.