#countup react typescript

Description

The "countup-react-ts" npm package is a React component that allows you to easily create a countup animation for your website.

Installation

1npm install countup-react-ts

Props

Prop	Type	Default	Description
className	string	""	Class name for the component
decimalSign	string	"."	Decimal sign ex:19.2
decimalValue	number	0	Decimal value ex:19.236 => 19
countInSeconds	number	3	Count in seconds from 1 to any
valueStart	number/string	0	Start value ex: 0
valueEnd	number/string	0	End value ex: 100
threshold	number	0.2	Threshold start counter value from 0 to 1
countOnce	boolean	false	false will be count every time when scroll to the counter, true just once
separator	boolean	true	Separator for the value ex: 1000 => 1,000 or 1000000 => 1,000,000
valuePrefix	string	""	Prefix for the value ex: $ 100 👨🏾‍🦱1M+ 🚗1K+ 💲8
valueK	string	"K+"	Value for the thousand ex: 1000 => 1K+
valueM	string	"M+"	Value for the million ex: 1000000 => 1M+

Usage

for array of objects

1import CountUp from 'countup-react-ts';
2
3const data = [
4  { title: "Happy customers", valueEnd: 1020600.28877, id: 1, valuePrefix: "👨🏾‍🦱" },
5  { title: "Income", valueEnd: "8", id: 2, valuePrefix: "💲" },
6  { title: "Rent Cars", valueEnd: "1000", id: 3, valuePrefix: "🚗" },
7  { title: "Landings", valueEnd: "8900000", id: 4, valuePrefix: "🛬" },
8  { title: "Food", valueEnd: 20, id: 5, valuePrefix: "🍴" },
9];
10
11const App: React.FC = () => {
12  return (
13    <div className={"wrapper"}>
14      <div className={"cards"}>
15        {data.map((item) => (
16          <div key={item.id} className={"card"}>
17            <h2>{item.title}</h2>
18            <CountUp
19              className="your-class_name"
20              decimalSign="."
21              decimalValue={3}
22              countInSeconds={3}
23              valueCommaSeparator={true}
24              valueStart={0}
25              valueEnd={item.valueEnd}
26              threshold={0.2}
27              countOnce={false}
28              separator={true}
29              valuePrefix={item.valuePrefix}
30              valueK={"K+"}
31              valueM={"M+"}
32            />
33          </div>
34        ))}
35      </div>
36    </div>
37  );
38};

or for the separate value

1import CountUp from 'countup-react-ts';
2
3const App: React.FC = () => {
4  return (
5    <div className={"wrapper"}>
6      <div className={"cards"}>
7          <div className={"card"}>
8            <h2>{item.title}</h2>
9            <CountUp
10              className="your-class_name"
11              decimalSign="."
12              decimalValue={3}
13              countInSeconds={3}
14              valueCommaSeparator={true}
15              valueStart={0}
16              valueEnd={12456}
17              threshold={1}
18              countOnce={true}
19              separator={true}
20              valuePrefix={item.valuePrefix}
21              valueK={"K+"}
22              valueM={"M+"}
23            />
24          </div>
25      </div>
26    </div>
27  );
28};

License

MIT

author: Artsiom Pchaliankou - Linkedin

If this project helped you, support me