Components

Numeral

Numeral is a primitive component used to format numbers according to our number formatting guidelines.

Please refer to our number formatting guidelines for more detailed information on how we format numbers.

import { Numeral } from '@sproutsocial/racine'

By default, Numeral will abbreviate numbers (when necessary). When numbers are abbreviated, a tooltip will be added to show the full number. If you’d like to turn this off, set the abbreviate prop to false.

123,457

Properties

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

COMMON
TYPOGRAPHY
Learn more
NameTypeDefaultDescriptionRequired?
numbernumber
The number to be formatted
localestring"en-US"
Locale to format. See also https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument
format"decimal""currency""percent""decimal"
The number formatting style to use
currencystring"USD"
The currency format to use when formatting currency
abbreviatebooleantrue
Flag to determine if the number should be abbreviated
precisionnumber"none"
Override the default decimal precision (2 for decimals/currency, 1 for percentages). Also accepts "none" to turn off precision. NOTE: This will not be applied if abbreviate is true.
qaObject

Note: This component uses the Text component under the hood, and accepts all of the props of that component in addition to those listed above.

Recipes

Currencies

When format is set to currency, you can provide a currency code to the currency prop to get the proper formatting. This only works when abbreviation is turned off.

$123,457€123,457¥123,457

Percentages

12.3%

Null values

When a number is not provided to the component, it will automatically render a hyphen to represent a null value.

-