Translation Contribution

client/src/locales/
├── en/translation.json          # English (source)
├── ar/translation.json          # Arabic
├── zh-Hans/translation.json     # Chinese (Simplified)
├── zh-Hant/translation.json     # Chinese (Traditional)
├── de/translation.json          # German
├── es/translation.json          # Spanish
├── fr/translation.json          # French
└── [other languages]/translation.json

{
  "com_ui_submit": "Submit",
  "com_ui_cancel": "Cancel",
  "com_ui_save": "Save",
  "com_nav_settings": "Settings",
  "com_auth_login": "Log In",
  "com_error_invalid_input": "Invalid input provided"
}

import { useLocalize } from '~/hooks';

function MyComponent() {
  const localize = useLocalize();
  
  return (
    <div>
      <h1>{localize('com_ui_welcome')}</h1>
      <button>{localize('com_ui_submit')}</button>
      <p>{localize('com_error_invalid_input')}</p>
    </div>
  );
}

import { useLocalize } from '~/hooks';

function UserGreeting({ userName }: { userName: string }) {
  const localize = useLocalize();
  
  // Translation key: "com_ui_greeting": "Hello, {{name}}!"
  return <h1>{localize('com_ui_greeting', { name: userName })}</h1>;
}

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: {
      'zh-TW': ['zh-Hant', 'en'],
      'zh-HK': ['zh-Hant', 'en'],
      zh: ['zh-Hans', 'en'],
      default: ['en'],
    },
    fallbackNS: 'translation',
    ns: ['translation'],
    debug: false,
    defaultNS: 'translation',
    resources,
    interpolation: { escapeValue: false },
  });

rules: {
  'i18next/no-literal-string': [
    'error',
    {
      mode: 'jsx-text-only',
      'should-validate-template': true,
    },
  ],
}

npm run lint:fix

{
  "com_ui_message_one": "{{count}} message",
  "com_ui_message_other": "{{count}} messages"
}

localize('com_ui_message', { count: messageCount });