@clustree/intl

Components used for translation by Clustree

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@clustree/intl
Minified + gzip package size for @clustree/intl in KB

Readme

@clustree/intl

Translation utilities for React and Javascript.

This repo wraps FormatJS and React Intl primitives

Installing

yarn add @clustree/intl or npm add @clustree/intl You'll also need babel-plugin-macros to use the macro.

Using @clustree/intl

With react

This project exports Translate and Provider components.

import { Provider, Translate } from '@clustree/intl';

Provider has the same API as Provider from 'react-intl' but it leverages setLocale to make translate work as well.

Translate has the same API as FormattedMessage from 'react-intl', but it handles inline React Components.

<Translate defaultMessage="<Link>HomePage</Link>" components={{Link: <Link to="/">}} />

With plain javascript

In plain javascript, we use the setLocale and translate helper functions.

setLocale(locale, messages)

translate(defaultMessage, { id?, values })

Advanced Usage

A babel macro https://github.com/kentcdodds/babel-plugin-macros allows us to extract messages for translation and allows us to have a more explicit api for Translate.

Thus we can write:

<Translate><Link to="/">HomePage</Link></Translate>

which is equivalent to the Definition above

Caveats

Changing locales will unmount the subtree beneath Provider. This allows us to use translate in components without worrying about locale updates in deep subtrees.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.