Counter

React 数字滚动组件：每次变化时滚动到新值，并弹出本次增减量，如同游戏中的金币计数。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/counter

示例

信用点

12,480cr

counter-credits.tsx

import { useState } from "react";import { Button } from "@/components/zero/button";import { Counter } from "@/components/zero/counter";export default function CounterCredits() {  const [credits, setCredits] = useState(12480);  return (    <div className="grid justify-items-start gap-5">      <p className="flex items-baseline gap-2">        <Counter value={credits} delta className="text-zero-2xl" />        <span className="font-black font-zero text-zero-accent text-zero-md italic">          cr        </span>      </p>      <div className="flex flex-wrap gap-3">        <Button size="sm" onClick={() => setCredits((c) => c + 3100)}>          Deliver the crate        </Button>        <Button          variant="secondary"          size="sm"          onClick={() => setCredits((c) => c - 450)}        >          Pay for repairs        </Button>      </div>    </div>  );}

行为

数字使用展示字体的斜体，并采用等宽数字，计数时不会左右抖动。滚动使用 roll 过渡；开启 delta 后，每次的增减量会从数字处向上浮起并淡出，增加时为强调色，减少时为红色。

读屏软件只读出最终数值，不读滚动过程。开启「减少动态效果」时，数字直接跳到新值，增减量也不再浮起。未指定 locale 时，数字按 en-US 格式显示，使服务端与浏览器的输出一致。

属性

Counter

属性	类型	默认值	说明
value	number	—	数值。
format	Intl.NumberFormatOptions	—	数字格式。
locale	string	"en-US"	数字格式所依据的地区。
delta	boolean	—	每次变化时弹出增减量。