number-counter

Number Counter

This will help you make counter and it will compatible with all browser. It has flexibility to count upward as well as downward.

Installation

npm install number-counter 

Usage

import NumberCounter from 'number-counter';

Demo example

<NumberCounter end={100} delay={4}/>

This will start a counter and transition from 0 to 100 on render.

Render prop example

// import number counter
import NumberCounter from 'number-counter';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
        
          // number counter for upward count.
          <NumberCounter end={100} delay={5} className="increment" preFix="Up revenue:" postFix="$"/>
          
          // number counter for downward count.
          <NumberCounter start={100} delay={5} className="increment" preFix="Down revenue:" postFix="$" reverse={true}/>
          
        </header>
      </div>
    );
  }
}

export default App;

View Demo

API

Props

Name	Type	Description	Default
start	number	Starting value of counter.	start={0}
end	number	Ending value of counter.	end={10}
className	string	CSS class name of element.	null
delay	number	Duration in second.	2s
preFix	string	Append text before counter value.	null
postFix	string	Append text after counter value.	null
reverse	boolean	Count downward.	false