@inkofpixel/react-light-translations
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

Uber minimal translation library for React

Heavily inspired by react-intl

yarn add react-light-tranlations
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { IntlProvider, useIntl } from 'react-light-translations';

const messages = {
  it: require('./lang/it.json'),
  en: require('./lang/en.json'),
};

const App = () => {
  const locale = 'en';
  return (
    <IntlProvider
      locale={locale}
      messages={messages[locale] as Record<string, string>}
    >
      <TestApp />
    </IntlProvider>
  );
};

function TestApp() {
  const { formatMessage } = useIntl();
  return (
    <div>
      <div>{formatMessage({ id: 'test' })}</div>
      <div>
        {formatMessage(
          { id: 'testWithVariable' },
          {
            variable: 'VARIABLE',
          }
        )}
      </div>
      <div>
        {formatMessage(
          { id: 'testWithElementVariable' },
          {
            variable: (
              <span style={{ fontWeight: 'bold' }}>VARIABLE ELEMENT</span>
            ),
          }
        )}
      </div>
      <div>
        {formatMessage(
          { id: 'testWithElementVariable' },
          {
            variable: (
              <span style={{ color: 'red' }}>
                {formatMessage({ id: 'test' })}
              </span>
            ),
          }
        )}
      </div>
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById('root'));

Readme

Keywords

none

Package Sidebar

Install

npm i @inkofpixel/react-light-translations

Weekly Downloads

4

Version

1.0.3

License

MIT

Unpacked Size

27.3 kB

Total Files

12

Last publish

Collaborators

  • macs91
  • federicobadini