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.
    }
}