countup-react-ts v0.0.3

#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

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