Skip to main content

Interface: CountingNumberProps

@arolariu/components


@arolariu/components / CountingNumberProps

Interface: CountingNumberProps

Defined in: components/ui/counting-number.tsx:10

Props accepted by CountingNumber.

Extends

  • HTMLAttributes<HTMLSpanElement>

Properties

number

number: number

Defined in: components/ui/counting-number.tsx:12

Final numeric value to animate toward.

Default

undefined

fromNumber?

optional fromNumber?: number

Defined in: components/ui/counting-number.tsx:14

Initial numeric value used before the spring animation starts.

Default

0

padStart?

optional padStart?: boolean

Defined in: components/ui/counting-number.tsx:16

Pads the integer portion so it matches the target value width.

Default

false

inView?

optional inView?: boolean

Defined in: components/ui/counting-number.tsx:18

Delays the animation until the element enters the viewport.

Default

false

inViewMargin?

optional inViewMargin?: MarginType

Defined in: components/ui/counting-number.tsx:20

Margin passed to the in-view observer when inView is enabled.

Default

"0px"

inViewOnce?

optional inViewOnce?: boolean

Defined in: components/ui/counting-number.tsx:22

Prevents the in-view animation from replaying after the first reveal.

Default

true

decimalSeparator?

optional decimalSeparator?: string

Defined in: components/ui/counting-number.tsx:24

Character used between the integer and decimal portions.

Default

"."

transition?

optional transition?: SpringOptions

Defined in: components/ui/counting-number.tsx:26

Spring physics applied to the counting animation.

Default

{stiffness: 90, damping: 50}

decimalPlaces?

optional decimalPlaces?: number

Defined in: components/ui/counting-number.tsx:28

Number of decimal places rendered during the animation.

Default

0
// was this page useful?