Number Pop
A number that changes in place. Only the digits that changed flip in, one after another from the left.
Usage
import { NumberPop } from '@wdzyi/ui';
<NumberPop
value={balance}
format={{ style: 'currency', currency: 'GBP' }}
/>Part of @wdzyi/ui. See setup to install it, or copy the code above.
Props
- valuenumber
- The number. Changing it runs the flip.
- formatIntl.NumberFormatOptions
- How to write it, such as a currency, a percentage or a set number of decimals. Commas come by default.
- localestring = 'en-GB'
- Whose commas and decimal points to use.
- quietboolean = false
- Changes without the flip, such as when someone takes back a like.
- classNamestring
- Added to its root. It takes its type from wherever it sits.
Notes
- Each character is keyed by its place either side of the decimal point, so when 999 becomes 1,000 it knows the units are still the units and the comma is new.
- Changed digits start 60ms apart, from the left, and a long run of them is squeezed so the last one starts within 280ms.
- It’s laid out from the right, so while the width eases, the digits that didn’t change don’t move at all.
- Screen readers get the whole number as text, and aren’t told each time it changes. Put it in a live region of your own if they should be.
- With reduced motion, it just changes.