react-scroll-number

A react digital scroll up and down animation component

install

pnpm add @ggc12319/react-scroll-number

Used in components

import { useState } from "react";
import "./App.css";
import ScrollNumber from "@ggc12319/react-scroll-number";
import "@ggc12319/react-scroll-number/style.css";
function App() {
  const [count, setCount] = useState(4.4);
  const addCount = () => {
    setCount(count + 1.7);
  };

  const subtractCount = () => {
    setCount(count - 1.7);
  };
  return (
    <div className="card">
      <div>
        <ScrollNumber value={count} fractionDigits={1} />
      </div>
      <button onClick={addCount}>count is {count}</button>
      <button onClick={subtractCount}>count is {count}</button>
    </div>
  );
}

export default App;

props

| Attribute | Description | Type | Default | | ----------------- | ---------------------------------- | ------ | ------- | | value | figure | number | - | | transformDuration | transform duration | number | 1500 | | fractionDigits | fraction digits | number | 0 | | prefix | prefix | string | '' | | infix | prefix but after the negative sign | string | '' | | suffix | suffix | string | '' | | thousandSeparator | the thousand separator | string | , |