95 lines
2.1 KiB
Plaintext
95 lines
2.1 KiB
Plaintext
---
|
|
title: Counting Number
|
|
description: A numeric display component that smoothly animates number changes with a counting animation.
|
|
author:
|
|
name: imskyleen
|
|
url: https://github.com/imskyleen
|
|
---
|
|
|
|
<ComponentPreview name="counting-number-demo" />
|
|
|
|
## Installation
|
|
|
|
<ComponentInstallation name="counting-number" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
<CountingNumber number={1000} />
|
|
```
|
|
|
|
## Examples
|
|
|
|
### With decimal
|
|
|
|
<ComponentPreview name="counting-number-decimal-demo" />
|
|
|
|
### Starting from a specific number
|
|
|
|
<ComponentPreview name="counting-from-number-demo" />
|
|
|
|
## Props
|
|
|
|
<TypeTable
|
|
type={{
|
|
number: {
|
|
description: 'The number to display',
|
|
type: 'number',
|
|
required: true,
|
|
},
|
|
fromNumber: {
|
|
description: 'The number to start from',
|
|
type: 'number',
|
|
required: false,
|
|
default: '0',
|
|
},
|
|
padStart: {
|
|
description: 'Whether to pad the number with leading zeros',
|
|
type: 'boolean',
|
|
required: false,
|
|
default: 'false',
|
|
},
|
|
inView: {
|
|
description: 'Enable animation when in view.',
|
|
type: 'boolean',
|
|
required: false,
|
|
default: 'false',
|
|
},
|
|
inViewMargin: {
|
|
description: 'The margin of the in view.',
|
|
type: 'string',
|
|
required: false,
|
|
default: '0px',
|
|
},
|
|
inViewOnce: {
|
|
description: 'Enable animation when in view once.',
|
|
type: 'boolean',
|
|
required: false,
|
|
default: 'true',
|
|
},
|
|
decimalSeparator: {
|
|
description: 'The decimal separator to use',
|
|
type: 'string',
|
|
required: false,
|
|
default: '.',
|
|
},
|
|
transition: {
|
|
description: 'The transition to use for the animation',
|
|
type: 'object',
|
|
required: false,
|
|
default: '{ stiffness: 90, damping: 50 }',
|
|
},
|
|
decimalPlaces: {
|
|
description: 'The number of decimal places to display',
|
|
type: 'number',
|
|
required: false,
|
|
default: '0',
|
|
},
|
|
}}
|
|
/>
|
|
|
|
## Credits
|
|
|
|
- Credits to [Motion](https://examples.motion.dev/react/html-content) for the inspiration
|
|
- Credits to [Magic UI](https://magicui.design/docs/components/number-ticker) for the spring transition
|