# react-animated-digits-component

> A react component to display digits in an animated way.

Latest version **1.0.1** (published 2021-03-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-animated-digits-component
pnpm add react-animated-digits-component
yarn add react-animated-digits-component
bun add react-animated-digits-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-03-28 |
| First published | 2021-03-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 40.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Author | gg-dev-05 |
| Maintainers | gg-dev-05 |
| Keywords | react, typescript, npm |

## Links

- npm: https://www.npmjs.com/package/react-animated-digits-component
- Repository: https://github.com/gg-dev-05/react-animated-digits-component
- Homepage: https://react-animated-digits.netlify.app/
- Issues: https://github.com/gg-dev-05/react-animated-digits-component/issues
- npm.io page: https://npm.io/package/react-animated-digits-component

## Dependencies (1)

- [uuid](https://npm.io/package/uuid.md) ^8.3.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2021-03-28
- 1.0.0 — 2021-03-27

## README

# REACT ANIMATED DIGITS COMPONENT

A react component to display digits in an animated way.

Check out the live demo of the component [here](https://react-animated-digits.netlify.app/)

## Installation

```
npm install react-animated-digits-component
```

You can import the component using

```jsx
import Digits from "react-animated-digits-component";
```

You can also import the type definitions if you're using TypeScript like so:

```jsx
import Digits, { DigitProps } from "react-animated-digits-component";
```

## Available props

|      Prop      |   Type   | Default  | Description                                                                                                         |
| :------------: | :------: | :------: | :------------------------------------------------------------------------------------------------------------------ |
| previousValue  | `number` | required | Initial value of the digit to start the animation from.                                                             |
|  currentValue  | `number` | required | Final value of the digit while ending animation.                                                                    |
| animationSpeed | `number` |   0.6    | Speed of animation in seconds                                                                                       |
|      size      | `number` |    24    | Size (width) of the whole digit in [rem](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/) units |
|   digitColor   | `string` | "black"  | Color of the visible digits. It can take values like #fff or rgb(0,0,0).                                            |
|  digitBorder   | `string` |    ""    | Sets the border property of the digit. It can take values like `1px solid #fff`                                     |
|  circleBorder  | `string` |    ""    | Sets the border property of the circles enclosing the rotating lines. It can take values like `1px solid #fff`      |

## Examples

```jsx

// your-component.js
import Digits from 'react-animated-digits-component'

function Example0(){
    return (
        <Digits previousValue={10} currentValue={200} digitColor={"green"} circleBorder={"2px solid pink"}>
    )
}


```

```jsx

// your-component.js
import Digits from 'react-animated-digits-component'

function Example1(){
    return (
        <Digits previousValue={10} currentValue={200} animationSpeed={1} digitColor={"rgb(0,0,0)"}>
    )
}


```

---
_Source: https://npm.io/package/react-animated-digits-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._