JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 24056
  • Score
    100M100P100Q133797F
  • License MIT

Higher order React component for using Polyglot

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.