Data & Status

Rolling Number Counter

소수점 자리까지 지원하며 숫자가 굴러가듯 바뀌는 카운터입니다.

Preview

data structure

Rolling Number Counter

increment decimal values

01234567890123456789.0123456789

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong.dev/r/counter.json

Code

typescript
Copied
1import { useState } from "react"2import { Counter } from "@/components/counter"34export default function Example() {5  const [value, setValue] = useState(17.8)67  return (8    <div>9      <Counter value={value} />10      <button11        type="button"12        onClick={() => setValue((current) => Number((current - 1).toFixed(1)))}13      >14        Decrease15      </button>16      <button17        type="button"18        onClick={() => setValue((current) => Number((current + 1).toFixed(1)))}19      >20        Increase21      </button>22    </div>23  )24}

Props

PropTypeDefaultDescription
valuenumber-Target number.
fontSizenumber100Digit font size.
placesPlaceValue[]auto from valueDisplayed integer and decimal places.
gapnumber8Gap between digit columns.
textColorstring"inherit"Digit text color.
fontWeightReact.CSSProperties["fontWeight"]"inherit"Digit weight.

Reference

ReactBits Rolling Number Counter