Intl-React

@calmdownval/intl bindings for React.

Installation

# NPM
npm i @calmdownval/intl @calmdownval/intl-react

# Yarn
yarn add @calmdownval/intl @calmdownval/intl-react

Both packages already contain TypeScript declarations.

Usage

First add a top-level provider to load a locale:

import { IntlProvider } from '@calmdownval/intl-preact';
import React from 'react';

export const App = () => (
  <IntlProvider url='/path/to/locale.json'>
    ...app contents
  </IntlProvider>
);

Then use the intl hook within components:

import { useIntl } from '@calmdownval/intl-preact';
import React from 'react';

export const SubmitButton = () => {
  const { t } = useIntl();
  return (
    <button type='submit'>
      {t('form.submit')}
    </button>
  );
};