React Number Increment

A configurable React component For counting up the number in your React appilcation. react-number-increment.

Installation

yarn add react-number-increment

npm install react-number-increment

Import

import Counter from "react-number-increment";

Simple example

<Counter />

This will start a count up transition from 0 to 100 on render with speed of 1ms.

Example

// import "./App.css";
import Counter from "react-number-increment";

function App() {
  return (
    <div className="App">
      <Counter
        start=0 // starting
        end=500 // ends
        speed=1 // 100ms
        decrement // in case if you want to decrement
        style={{ fontSize: "200px", fontWeight: 900 }} // add custom style
        threshold=1 // viewport 1=100%,
        child="+" // add childs ie + , - , *
        offset=5 // increments by 5
        seperate="," // seperates number in comma
       />
    </div>
  );
}

export default App;

Note that offsetend={4} will add the offset to the ending value.

Add end and starting Number

<Counter offsetend={4} speed={10} end={10} />

Tip: If you need to start the render prop component immediately, you can set speed={0}.

If you know about default values 👍

| key | Value | Guide / What they does | | --------- | ----- | ---------------------- | | start | 0 | Starting value | | end | 100 | Ending value | | speed | 1 | 1 is 100ms speed. | | decrement | 0 | pass to decrement | | offsetend | 0 | Adds the value in end | | threshold | .5 | 1 = 100% | | child | "+" | 100- , 2000*, "-", "*" | | offset | null | 5 // increments by 5 | | seperate | null | "," - 10,900 |

License ISC