i18n tools for React
This library is meant to be used as glue code between React and your favorite
i18n library. You can use it standalone, too.
Features
- Compatible with any i18n library.
- Compatible with isomorphic/server-side rendering.
Example
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { I18nProvider, Translate } from 'react-i18n-wrapper';
const translations = {
en: {
'hello-world': 'Hello World!',
},
fr: {
'hello-world': 'Bonjour Monde!',
},
};
const MyComponent = props => (
<div>
<Translate message="hello-world" />
</div>
);
console.log(
ReactDOMServer.renderToString(
<I18nProvider language="en" translations={translations}>
<MyComponent />
</I18nProvider>
)
);
API
I18nProvider
Component used to provide i18n context to child components.
Props:
translate({translations, language, message, params})
- A function to call to
translate a message. If you don't provide translate()
, a simple default
implementation is used. See below for details.translations
- An arbitrary object which will be passed along to your translate()
function. Using the default translate()
function, this should be an object
where keys are locales, and values are maps of message keys to translated
strings.language
- The locale to translate things into. This is a default and can
be changed via useI18n().setLanguage()
.noEscape
- If true, then all Translate components will behave like
noEscape
was set by default.
Translate
Props:
message
- The message key to translate. This is passed on to your
translate()
function.params
- Parameters to pass on to the translate()
function. This is an
arbitrary object.noEscape
- If true, the translated message will be rendered without escaping
the result.tagName
- Controls the element created by Translate. By default,
Translate
will return a bare string, setting this will wrap the returned
value in the specified type. Note that if noEscape
is true, this will
default to 'span'.className
- Class name to add to the generated element. Only used if
tagName
is set.
withI18n
This is a higher order component which provides the i18n
context object via
props. In most cases, you probably want to use Translate
to translate
messages, but in some cases you may want to access this directly:
import { withI18n } from 'react-i18n-wrapper';
class MyForm extends React.Component {
render() {
<textarea placeholder={this.props.i18n.translate('placeholder_text')} />;
}
}
export default withI18n(MyForm);
Here, this.props.i18n.translate(message, params)
is a function that can
translate a string, and this.props.i18n.language
is the current locale.
useI18n
An alternative to withI18n
, useI18n
provides a React hook which lets you
call into the translate function directly within your code:
import { useI18n } from 'react-i18n-wrapper';
export function MyForm(props) {
const i18n = useI18n();
return <textarea placeholder={i18n.translate('placeholder_text')} />;
}
Default translate() function
The default translate()
function expects translations
to be an object where
keys are locales, and values are maps of message keys to translated strings. The
default translate()
can also do some simple substitutions:
const translations = {
en: {
hello: 'Hello {name}!',
},
};
const MyComponent = props => <Translate message="hello" params={{ name: 'Jason' }} />;
The default translate()
can also accept a message
that is an object with
locales as keys:
const translateableObject = {
en: 'here',
fr: 'ici',
};
const MyComponent = props => <Translate message={translateableObject} />;