JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 52
  • Score
    100M100P100Q60149F
  • License ISC

Localizer for ReactJS applications

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

  • 5kb size
  • Auto-refresh localization after changing language
  • Hooks support

Installation

npm install reactjs-localizer

or

yarn install reactjs-localizer

Usage example

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

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

const locales = {
  'I want %count% likes for my library': {
    // support inserted params
    'EN': 'I want %count% likes for my library',
    'RU': 'Я хочу %count% лайков для моей библиотеки',
  },
  'Amazing title': {
    'EN': 'Amazing title',
    'RU': 'Удивительный заголовок',
  },
  'Toggle language': {
    'EN': 'Toggle language',
    'RU': 'Переключить язык',
  },
};

function App() {
  // You can get { localize, language, setLanguage } from this hook
  const { localize, setLanguage } = useLocalizer();

  const toggleLanguage = () =>
    setLanguage((prev) => (prev === 'EN' ? 'RU' : 'EN'));

  return (
    <div>
      <h1>
        {localize('I want %count% likes for my library', { 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')
);

License

MIT