Skip to main content

Shared I18n

Internationalization (i18n) infrastructure for the Substrate project, built on i18next.

This package provides i18n utilities (initialization, React provider, hooks) but does not store translation JSON files. Each application provides its own translations at initialization time.

For detailed usage documentation, see the Shared I18n documentation on the docs site.

Contributing​

Prerequisites​

  • Node.js 20+ and Yarn
  • Understanding of i18next and internationalization concepts
  • Familiarity with React (for using the provider and hooks)

Commands​

# Build the package
nx build shared-i18n

# Run tests
nx test shared-i18n

# Lint the package
nx lint shared-i18n

Project Structure​

packages/shared-i18n/
├── src/
│   ├── lib/
│   │   ├── i18n.ts        # Core i18n initialization and helpers
│   │   ├── i18n.spec.ts   # Tests
│   │   └── react.tsx       # React provider and hooks
│   └── index.ts            # Package exports
├── docs/                   # Documentation (built to docs site)
└── README.md               # This file

Adding New Translations​

Translation JSON files are owned by each application (e.g., apps/web/src/locales/en.json).

  1. Open the translation file in the relevant application
  2. Add your translation following the key format: project.scope.purpose.term
  3. For other languages, add the same key to their respective files
  4. Use the new translation key in your code

Translation Key Format​

Keys follow the format: project.scope.purpose.term

Examples:

  • global.company.name - Shared across all projects
  • web.navigation.warning.text - Specific to the web app's navigation
  • web.home.welcome - For the web app's home page

Adding New Languages​

  1. Create a new JSON file in the application's locales directory (e.g., apps/web/src/locales/fr.json)
  2. Copy the structure from en.json and translate all values
  3. Update the application's i18n provider to include the new language in the resources object

Environment Variables​

No environment variables required for this package.

React Usage​

The package provides:

  • I18nProvider - React context provider (requires resources prop with translation data)
  • useTranslation() - Hook to get translation function
  • useI18nContext() - Hook to access language context

Node.js Usage​

The package also exports standalone functions for use in Node.js code:

  • initI18n({ resources }) - Initialize i18n with translation resources
  • t(key) - Translate a key