Docs
/
Usage guide
/
Numbers

Numbers

Formatting plain numbers

When you're formatting plain numbers that are not part of a message, you can use a separate hook:

import {useIntl} from 'next-intl';

function Component() {
  const intl = useIntl();

  intl.formatNumber(499.9, {style: 'currency', currency: 'USD'});
}

See the MDN docs about NumberFormat to learn more about the options you can pass to formatNumber.

Numbers within messages

Numbers can also be embedded within messages:

{
  "percentage": "Displayed as a percentage: {value, number, percent}",
  "decimals": "At most 2 fraction digits: {value, number, ::.##}"
}

See the ICU docs about number skeletons to learn more about this syntax.

💡

Note the leading :: that is used to indicate that a skeleton should be used.

Additionally, you can configure custom formatters which can be referenced by name:

{
  "price": "This product costs {price, number, currency}"
}
t(
  'price',
  {price: 32000.99},
  {
    // Custom formats can be supplied via the third parameter
    number: {
      currency: {
        style: 'currency',
        currency: 'EUR'
      }
    }
  }
);

To reuse number formats for multiple components, you can configure global formats.

Messages
Dates and times