useNumberFormatter

Introduction

useNumberFormatter wraps a builtin browser Intl.NumberFormat object to provide a React Hook that integrates with the i18n system in React Aria. It handles formatting numbers for the current locale, updating when the locale changes, and caching of number formatters for performance. See the Intl.NumberFormat docs for information on formatting options.

API

Example

This example displays a currency value for two locales: USA, and Germany. Two instances of the Currency component are rendered, using the I18nProvider to specify the locale to display.

import {I18nProvider, useNumberFormatter} from '@react-aria/i18n';

function Currency({value, currency}) {
  let formatter = useNumberFormatter({
    style: 'currency',
    currency,
    minimumFractionDigits: 0
  });

  return (
    <p>{formatter.format(value)}</p>
  );
}

<>
  <I18nProvider locale="en-US">
    <Currency value={125000} currency="USD" />
  </I18nProvider>
  <I18nProvider locale="de-DE">
    <Currency value={350000} currency="EUR" />
  </I18nProvider>
</>