countup-react-ts
TypeScript icon, indicating that this package has built-in type declarations

0.0.3 • Public • Published

#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

npm 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

import CountUp from 'countup-react-ts';

const data = [
  { title: "Happy customers", valueEnd: 1020600.28877, id: 1, valuePrefix: "👨🏾‍🦱" },
  { title: "Income", valueEnd: "8", id: 2, valuePrefix: "💲" },
  { title: "Rent Cars", valueEnd: "1000", id: 3, valuePrefix: "🚗" },
  { title: "Landings", valueEnd: "8900000", id: 4, valuePrefix: "🛬" },
  { title: "Food", valueEnd: 20, id: 5, valuePrefix: "🍴" },
];

const App: React.FC = () => {
  return (
    <div className={"wrapper"}>
      <div className={"cards"}>
        {data.map((item) => (
          <div key={item.id} className={"card"}>
            <h2>{item.title}</h2>
            <CountUp
              className="your-class_name"
              decimalSign="."
              decimalValue={3}
              countInSeconds={3}
              valueCommaSeparator={true}
              valueStart={0}
              valueEnd={item.valueEnd}
              threshold={0.2}
              countOnce={false}
              separator={true}
              valuePrefix={item.valuePrefix}
              valueK={"K+"}
              valueM={"M+"}
            />
          </div>
        ))}
      </div>
    </div>
  );
};

or for the separate value

import CountUp from 'countup-react-ts';

const App: React.FC = () => {
  return (
    <div className={"wrapper"}>
      <div className={"cards"}>
          <div className={"card"}>
            <h2>{item.title}</h2>
            <CountUp
              className="your-class_name"
              decimalSign="."
              decimalValue={3}
              countInSeconds={3}
              valueCommaSeparator={true}
              valueStart={0}
              valueEnd={12456}
              threshold={1}
              countOnce={true}
              separator={true}
              valuePrefix={item.valuePrefix}
              valueK={"K+"}
              valueM={"M+"}
            />
          </div>
      </div>
    </div>
  );
};

License

MIT

author: Artsiom Pchaliankou - Linkedin

If this project helped you, support me

Buy Me A Coffee

Package Sidebar

Install

npm i countup-react-ts

Weekly Downloads

2

Version

0.0.3

License

MIT

Unpacked Size

16.1 kB

Total Files

6

Last publish

Collaborators

  • craziestbee