Numbers

Formatting plain numbers

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

import {useFormatter} from 'next-intl';
 
function Component() {
  const format = useFormatter();
 
  format.number(499.9, {style: 'currency', currency: 'USD'});
}

See the MDN docs about NumberFormat (opens in a new tab) to learn more about the options you can pass to number (interactive explorer (opens in a new tab)).

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 (opens in a new tab) 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