1.0.3 • Published 5 years ago

number-counter v1.0.3

Weekly downloads
109
License
ISC
Repository
github
Last release
5 years ago

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;

demo-counter

View Demo

API

Props

NameTypeDescriptionDefault
startnumberStarting value of counter.start={0}
endnumberEnding value of counter.end={10}
classNamestringCSS class name of element.null
delaynumberDuration in second.2s
preFixstringAppend text before counter value.null
postFixstringAppend text after counter value.null
reversebooleanCount downward.false