Package Exports

reactjs-localizer
reactjs-localizer/dist/index.js

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 (reactjs-localizer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

reactjs-localizer

Localizer for your React application.

Features

Small library size
Auto-refresh localization after changing language
Functional and class components support
You can use hook, HOC or context
You can pass values to locales
TypeScript support

Installation

npm install reactjs-localizer

Usage example

import React from 'react';
import ReactDOM from 'react-dom';

import { LocalizerProvider, withLocalizer } from 'reactjs-localizer';

const locales = {
  'I invited %count% people to my party': {
    // support inserted params
    en: 'I invited %count% people to my party',
    ru: 'Я пригласил %count% людей на мою вечеринку',
  },
  'Amazing title': {
    en: 'Amazing title',
    ru: 'Удивительный заголовок',
  },
  'Toggle language': {
    en: 'Toggle language',
    ru: 'Переключить язык',
  },
};

const App = withLocalizer(({ localize, setLanguage }) => {
  const toggleLanguage = () =>
    setLanguage((prev) => (prev === 'en' ? 'ru' : 'en'));

  return (
    <div>
      <h1>
        {localize('I invited %count% people to my party', { count: Date.now() })}
      </h1>
      <h1>{localize('Amazing title')}</h1>
      <button onClick={toggleLanguage}>{localize('Toggle language')}</button>
    </div>
  );
});

ReactDOM.render(
  <LocalizerProvider defaultLanguage="en" currentLanguage="en" locales={locales}>
    <App />
  </LocalizerProvider>,
  document.getElementById('root')
);

Also you can use useLocalizer hook for functional components and LocalizerContext for classes instead of withLocalizer HOC.

License

MIT