@teamleader/i18n
Advanced tools
Teamleader i18n implementation for our frontend micro service, built with react-intl (in a hacky way).
npm i @teamleader/i18n
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;
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>
);
MIT.
FAQs
Teamleader i18n implementation
We found that @teamleader/i18n demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 12 open source maintainers collaborating on the project.
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.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.