@fecapark/number-rolling v0.0.7

Number Rolling

The React library for number rolling animation.

• Demo
• NPM

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="",
/>;

Examples

Simple usage

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

<Roller value={13000} />;

With suffix

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

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

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

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

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>

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

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

Staggering

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

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

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

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

Diff

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

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

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

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

Rollway

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

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

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

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

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>