Skip to content

fecapark/number-rolling

Repository files navigation

Number Rolling

The React library for number rolling animation.

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

Install

npm i @fecapark/number-rolling
yarn add @fecapark/number-rolling

Usage

All Properties

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

<Roller
  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

Simple usage

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

<Roller value={13000} />;

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


With suffix

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

<Roller value={...} suffix="%" />;

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

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

<Roller value={...} suffix="$" suffixPosition="front" />;

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


Align

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

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

<div style={{ width: 600 }}>
  <Roller value={...} align="right" />;
</div>

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

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

<div style={{ width: 600 }}>
  <Roller value={...} align="left" />;
</div>

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


Staggering

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

<Roller value={...} staggering={true} />;

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

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

<Roller value={...} staggering={false} />;

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


Diff

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

<Roller value={...} diff={true} />;

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

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

<Roller value={...} diff={false} />;

무제


Rollway

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

<Roller value={...} rollWay="up" />;

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

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

<Roller value={...} rollWay="down" />;

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


showAfterFontNameLoaded

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.

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

<div style={{
  fontFamily: "Roboto, 'Noto Sans' sans-serif"
}}>
  <Roller value={...}  showAfterFontNameLoaded={["Roboto", "Noto Sans"]} />;
</div>
Roboto Loaded Noto Sans Loaded Result
loaded loaded show
failed failed not show
loaded failed show
failed loaded show