Skip to content

skychavda/number-counter-npm

Repository files navigation

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

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published