Provides higher order component for using Polyglot with React Sample in 2020

Provides higher order component for using Polyglot with React Sample in 2020

tutorials -

React Polyglot

Higher order component for using Polyglot.


npm install --save react-polyglot


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",

  <I18n locale={locale} messages={messages}>
    <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

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

Work in progress

Tests and Contributing guides are in progress.


Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff