React Localization with react-intl

npm install react-intl

import { IntlProvider } from 'react-intl';
import messages from './locales/en.json';

function App() {
  return (
    <IntlProvider messages={messages} locale="en" defaultLocale="en">
      <YourApp />
    </IntlProvider>
  );
}

import { FormattedMessage } from 'react-intl';

function Welcome() {
  return (
    <h1>
      <FormattedMessage
        id="welcome.title"
        defaultMessage="Welcome to {appName}"
        values={{ appName: 'IntlPull' }}
      />
    </h1>
  );
}

import { useIntl } from 'react-intl';

function PriceDisplay({ price }: { price: number }) {
  const intl = useIntl();
  
  return (
    <span>
      {intl.formatNumber(price, {
        style: 'currency',
        currency: 'USD'
      })}
    </span>
  );
}