# 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. ```js 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( , document.getElementById('app') ); ``` Then inside `App` or a child component of `App` you can do: ```js import React from 'react'; import { translate } from 'react-polyglot'; const Greeter = ({ name, t }) => (

{t('hello_name', { name })}

); Greeter.propTypes = { name: React.PropTypes.string.isRequired, t: React.PropTypes.func.isRequired, }; export default translate()(Greeter); ``` or with React Hooks: ```js import React from 'react'; import { useTranslate } from 'react-polyglot'; export default const Greeter = ({ name }) => { const t = useTranslate(); return (

{t('hello_name', { name })}

); }; 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. ```js 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. ```js 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( , { 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](https://github.com/nayaabkhan/react-polyglot/releases) tab.

			Stars	Issues	Version	Updated	Created	Size
	react-intl		14,257	47	6.6.8	4 months ago	10 years ago
	react-polyglot		56	18	0.7.2	3 years ago	8 years ago

react-intl vs react-polyglot

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past