ns-translate

Namespaced I18n translator for React

The ns-translate package provides a utility function nsTranslate for using namespaced translations in React components just the way you would normally do with i18next.

Setup

Install the package:

npm install ns-translate

Then setup i18next as you would normally do.

Example:

// i18n.js / i18n.ts:
import i18next from 'i18next';

i18next.init({
  lng: 'en',
  debug: true,
  resources: {
    en: {
      translation: {
        "key": "hello world"
      }
    }
  }
});

Usage

Import in a React component and pass the commonly used, component specific translation path (ex. 'users.pages.index.modal') to the nsTranslate function. It defines the translation namespace that will be used to retreive the translation keys from the locale files.

Then you can reference only the particular translation key without passing the entire translation path (ex. t('.heading')):

import React from 'react';
import nsTranslate from 'ns-translate';

const MyComponent = () => {
  const { t } = nsTranslate('users.pages.index.modal');

  return (
    <div>{t('.heading')}</div>
    <div>{t('.bodyText')}</div>
    <div>{t('.contact')}</div>
  );

Instead of explicitly declaring the namespaces for each translation:

OLD WAY       import React from 'react';
              import { useTranslation } from 'react-i18next';

              const MyComponent = () => {
                const { t } = useTranslation();

                return (
                  <div>{t('users.pages.index.modal.heading')}</div>
                  <div>{t('users.pages.index.modal.bodyText')}</div>
                  <div>{t('users.pages.index.modal.contact')}</div>
                );

Interpolation can also be passed:

src/locales/en.json:

"pages": {
  "heading": "Title of the page"
  "lastUpdated": "Last updated at {{date}}"
}

src/pages/index.tsx:

const { t } = nsTranslate('pages');

return (
  <div>
    <div>{t('.heading')}</div>
    <div>{t('.lastUpdated', { date: '2024-07-11' })}</div>
  </div>
);

It also can be used without a namespace just like with react-i18next:

const { t } = nsTranslate();

return <div>{t('pages.heading')}</div>

TypeScript Support

This package includes TypeScript type definitions. If you use TypeScript, you automatically get type-checking for the nsTranslate function.

License

This project is licensed under the MIT License.

Package URL

https://www.npmjs.com/package/ns-translate

Code repository

https://bitbucket.org/endeavia/ns-translate/src/master/

Author

Tamás Kamarás