@teamleader/i18n

Teamleader i18n implementation

2.0.2
npm

Version published: 6 years ago

Maintainers: 10

Created: 6 years ago

Source

@teamleader/i18n

Teamleader i18n implementation for our frontend micro service, built with react-intl (in a hacky way).

Installation

npm i @teamleader/i18n

Usage Example

Wrap your app with the Provider.

import { Provider as I18nProvider } from '@teamleader/i18n';

const App = () => (
  <I18nProvider namespace="domains.invoicing" path="/" language="en">
    <TheRestOfYourApp />
  </I18nProvider>
);

Now you can Use translations inside your components.

You can use the withI18n HOC which will provide a translate function to your component.

import { withI18n } from '@teamleader/i18n';

const  MyComponent = () => (
  <button>{this.props.translate('send')}</button>;
)

export default withI18n(MyComponent);

Or you can use the Translation component.

import { Translation } from '@teamleader/i18n';

const MyComponent = () => (
  <button><Translation id="send" /></button>;
)

export default MyComponent;

Configuration

You can configure the Provider with a few props.

`namespace`: String (optional)

The translation keys will be prefixed with the namespace. For example, if your namespace is invoicing, an example translation key would be invoicing.myTranslationKey.

`language` String (optional)

The language that should be used. If you don't provide a language, it will try go get the language from the html element (<html lang="en">) and will fallback to english (en);

`path`: String | Function (optional)

The path to the translation files. This can be either a string or a function. If you provide a string, the file name will be added to the path. If you use a function, it will call the function and pass the language as a paramter. The function should return a the path to the translation file as a string.

Example with a string:

import { Provider as I18nProvider } from '@teamleader/i18n';

const App = () => (
  <I18nProvider namespace="domains.invoicing" path="/translations/" language="en">
    <TheRestOfYourApp />
  </I18nProvider>
);

Example with a function:

import { Provider as I18nProvider } from '@teamleader/i18n';

const getPath = language => `/translations/${language}.json`;

const App = () => (
  <I18nProvider namespace="domains.invoicing" path={getPath} language="en">
    <TheRestOfYourApp />
  </I18nProvider>
);

License

MIT.

FAQs

What is @teamleader/i18n?

Is @teamleader/i18n well maintained?

Package last updated on 01 Feb 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install