#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