Package Exports
- react-polyglot
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-polyglot) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
React Polyglot
Provides higher order component for using Polyglot with React
Installation
npm install --save react-polyglot
Usage
react-polyglot
exports consists for one wrapper component called I18n
, one decorator called
translate
and one hook called useTranslate
. The decorator provides a prop t
which is instance of Polyglot
.
You are required to wrap your root component with I18n
and pass on a locale
like en
or fr
.
And messages
object containing the strings.
import React from 'react';
import { render } from 'react-dom';
import { I18n } from 'react-polyglot';
import App from './components/app';
const locale = window.locale || 'en';
const messages = {
"hello_name": "Hello, %{name}.",
"num_cars": "%{smart_count} car |||| %{smart_count} cars",
}
render(
<I18n locale={locale} messages={messages}>
<App />
</I18n>,
document.getElementById('app')
);
Then inside App
or a child component of App
you can do:
import React from 'react';
import { translate } from 'react-polyglot';
const Greeter = ({ name, t }) => (
<h3>{t('hello_name', { name })}</h3>
);
Greeter.propTypes = {
name: React.PropTypes.string.isRequired,
t: React.PropTypes.func.isRequired,
};
export default translate()(Greeter);
or with React Hooks:
import React from 'react';
import { useTranslate } from 'react-polyglot';
export default const Greeter = ({ name }) => {
const t = useTranslate();
return (
<h3>{t('hello_name', { name })}</h3>
);
};
Greeter.propTypes = {
name: React.PropTypes.string.isRequired
};
Live Examples
Minimal example using class components
https://codesandbox.io/s/mq76ojk228
Advance example with user changeable locales
https://codesandbox.io/s/px8n63v0m
How to provide context in your tests
Use a simple helper to wrap your components in a context.
export const wrapWithContext = function (component, context, contextTypes) {
const wrappedComponent = React.createClass({
childContextTypes: contextTypes,
getChildContext() {
return context;
},
render() {
return component;
},
});
return React.createElement(wrappedComponent);
}
Then use it inside your tests.
import React from 'react';
import { renderToString } from 'react-dom/server';
import Polyglot from 'node-polyglot';
import Greeter from './greeter';
import { wrapWithContext } from './helpers';
const polyglot = new Polyglot({
locale: 'en',
phrases: {"hello_name": "Hello, %{name}."},
});
const greeterWithContext = wrapWithContext(
<Greeter name="Batsy" />,
{ t: polyglot.t.bind(polyglot) },
{ t: React.PropTypes.func }
);
// use greeterWithContext in your tests
// here it is shown how to use it with renderToString
console.log(renderToString(greeterWithContext));
Release History
Check the Releases tab.