Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@teamleader/i18n

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@teamleader/i18n

Teamleader i18n implementation

6.3.0
npm

Version published: 3 years ago

Weekly downloads: 59; decreased by-9.23%

Maintainers: 9

Weekly downloads

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="/" locale="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.

`locale` String (optional)

The locale that should be used. If you don't provide a locale it will try to get it 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:

`debug`: Boolean (optional)

When this is set to true the message IDs will be shown instead of the actual translations.

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 popular?

Is @teamleader/i18n well maintained?

Package last updated on 11 May 2022

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