Formatting
The organization and style for how to display a set of data. This can be numbers, currency, dates, times, etc.
All of the basic formatting rules in Thunderball come from the use of react-intl.
Date/Time Formatting
Formatting Dates
FormattedDate in 'react-intl' should be used wherever possible.
Examples
<FormattedTime
value={new Date(1459832991883)} />
// OUTPUT: <span>4/5/2016</span>
<FormattedTime
value={Date.parse('1997-07-16T19:20:15')} />
// OUTPUT: <span>7/16/1997</span>
Formatting Times
FormattedTime in 'react-intl' should be used wherever possible.
Examples
<FormattedTime
value={new Date(1459832991883)} />
// OUTPUT: <span>1:09 AM</span>
<FormattedTime
value={Date.parse('1997-07-16T19:20:15')} />
// OUTPUT: <span>2:20 PM</span>
Relative Times
FormattedRelative in 'react-intl' should be used wherever possible.
Examples
<FormattedRelative
value={Date.now()} />
// OUTPUT: <span>now</span>
// ...10 seconds later: <span>10 seconds ago</span>
// ...60 seconds later: <span>1 minute ago</span>
Number Formatting
Formatting Numbers
FormattedNumber in 'react-intl' should be used wherever possible.
Examples
<FormattedNumber
value={1234} />
// OUTPUT: <span>1,234</span>
<FormattedNumber
value={.98}
style='percent' />
// OUTPUT: <span>98%</span>
Currency
FormattedNumber in 'react-intl' should be used wherever possible.
Examples
<FormattedNumber
value={1234}
style='currency'
currency='USD' />
// OUTPUT: <span>$1,234.00</span>
<FormattedNumber
value={98.60}
style='currency'
currency='USD'
maximumFractionDigits={0} />
// OUTPUT: <span>$99</span>
Pluralization with Numbers
Often when displaying a number with words, you need to decide the descriptive words should be plural or singular. For example: '1 item' or '27 items'.
FormattedPlural in 'react-intl' should be used wherever possible. It is a simple component that will do the lifting of determining pluralization rules. And allows for multiple plural categories.
Examples
<FormattedPlural
value={1}
one='item'
other='items' />
// OUTPUT: <span>1 item</span>
<FormattedPlural
value={100}
one='item'
other='items' />
// OUTPUT: <span>100 items</span>
<FormattedPlural
value={2}
zero='Nobody walks'
one='A guy walks'
two='A couple of guys walk'
few='A few guys walk'
many='A bunch of guys walk' />
into a bar
// OUTPUT: <span>A couple of guys walk</span> into a bar