Number Rolling

The React library for number rolling animation.

!화면 기록 2024-05-18 22 56 51

- Demo
- NPM

Install

``
npm i @fecapark/number-rolling
`

`
yarn add @fecapark/number-rolling
`




Usage

$3

`tsx
import { Roller } from "@fecapark/number-rolling";

value={13000}
suffix="",
suffixPosition="back",
align="center",
fontSize={48},
rollDuration={0.6},
shiftDuration={0.45},
staggering={false},
diff={false},
rollWay="down",
showAfterFontNameLoaded="",
/>;
`

| prop | description | type | initial value | required |
| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | --------------------------- | -------- |
| value | Number(integer, float) value to display. | number | value required | true |
| suffix | Suffix string to display. | string | "" (empty string) | false |
| suffixPosition | Determines position of the suffix string. | front or back | back | false |
| align | Text align of animation container width change. | left or center or right | center | false |
| fontSize | Font size of value and suffix. | number | 48 | false |
| rollDuration | Duration of value rolling animation. | number (seconds) | 0.6 (seconds) | false |
| shiftDuration | Duration of width changing animation. | number (seconds) | 0.45 (seconds) | false |
| staggering | Determines trigger each value's rolling animation as sequence or randomly. | boolean | false (triggers randomly) | false |
| diff | Determines trigger rolling aniamtion for only changed values. | boolean | false | false |
| rollWay | Rolling animation's roll direction. | up or down | down | false |
| showAfterFontNameLoaded | This component will be show after setted font-face loaded. If you setted font-family through any styling to this component, you should set this prop values as your font-family values for preventing CLS(Cumulative Layout Shift). See examples. | string[] | [] (empty array) | false |




Examples

$3

`tsx
import { Roller } from "@fecapark/number-rolling";

;
`

!화면 기록 2024-05-18 23 28 00




$3

`tsx
import { Roller } from "@fecapark/number-rolling";

;
`

!화면 기록 2024-05-18 23 30 50

`tsx
import { Roller } from "@fecapark/number-rolling";

;
`

!화면 기록 2024-05-18 23 31 24




$3

For use align props,
Roller component should be wrapped in an element that has enough width.

`tsx
import { Roller } from "@fecapark/number-rolling";


`

!화면 기록 2024-05-18 23 34 26

`tsx
import { Roller } from "@fecapark/number-rolling";


`

!화면 기록 2024-05-18 23 36 57

$3

`tsx
import { Roller } from "@fecapark/number-rolling";

;
`

!화면 기록 2024-05-18 23 39 34

`tsx
import { Roller } from "@fecapark/number-rolling";

;
`

!화면 기록 2024-05-18 23 40 03




$3

`tsx
import { Roller } from "@fecapark/number-rolling";

;
`

!화면 기록 2024-05-18 23 44 10

`tsx
import { Roller } from "@fecapark/number-rolling";

;
`

!무제




$3

`tsx
import { Roller } from "@fecapark/number-rolling";

;
`

!화면 기록 2024-05-18 23 53 52

`tsx
import { Roller } from "@fecapark/number-rolling";

;
`

!화면 기록 2024-05-18 23 54 38




$3

If you setted font-family, recommended to use this property.

In example below, the font Roboto and Noto Sans are setted. After all setted fonts are loaded, if any one of the fonts is successfully loaded, the components are displayed on the screen.

`tsx
import { Roller } from "@fecapark/number-rolling";


`

| Roboto Loaded | Noto Sans Loaded | Result |
| ------------- | ---------------- | -------- |
| loaded | loaded | show |
| failed | failed | not show |
| loaded | failed | show |
| failed | loaded` | show |