number-ticker
v2.2.4
Published
Plugin to animate Number.
Downloads
131
Maintainers
Readme
Number Ticker Animation Library
Preview
Install Package
npm install number-ticker
Import package
import { NumberTicker } from 'number-ticker';`
Import CSS in index.html or angular.json or style.css
node_modules/number-ticker/lib/NumberTicker.css
Usage for React JS
//For React JS
import { useRef } from 'react';
import { NumberTicker } from 'number-ticker';`
export default function Form() {
const tickerRef = useRef(null);
useEffect(() => {
// Initialize Ticker
const ticker = new NumberTicker(tickerRef.current, {Options})
// Update ticker when your number updates
ticker.UpdateTicker(123.45);
}, []);
return (
<>
<span ref={tickerRef} />
</>
);
}
Usage for Angular
//HTML File
<span #ticker></span>
//TS File
import { NumberTicker } from 'number-ticker';
export class NumberTickerComponent implements OnInit, AfterViewInit {
@ViewChild ('ticker') ticker: ElementRef;
ngOnInit() {
}
ngAfterViewInit() {
// Initialize Ticker
const ticker = new NumberTicker(this.ticker.nativeElement);
// Update ticker when your number updates
ticker.UpdateTicker(123.45);
}
}
Options (All are optional based on requirement)
{
prefix: string; // You can use prefix like '$', Default it is blank.
autoWidth: boolean; // Autometicully take width of current character, By default it is true.
transitionSpeed: number; // You can set transition speed based on needs, It takes value between 1 to 10, Default 6.
transitionDelay: number; // You can set delay of next character to animate based on needs, It takes value between 1 to 10, Default 6.
digitsAfterDecimal: number; // You can add number of digits after decimal points, default is 2.
currencyFormat: string; // Value saparated by comma like currency. Ex. 'en-IN' = 1,00,000. or 'en-US' = 1,000,000. Default is plain number = 100000.
timingFunction: Timing function like 'ease', 'linear' or you can use cubic-bezier as well.
colorOnNumberChange:{
colorOnIncrease: string; // Color change while animate the number.
colorOnDecrease: string; // Color change while animate the number.
}
}