# use-animate-number

> React hook for changin a number value smoothly

Latest version **1.0.5** (published 2020-09-12) · GPL-3.0-or-later license · 0 weekly downloads

## Install

```sh
npm install use-animate-number
pnpm add use-animate-number
yarn add use-animate-number
bun add use-animate-number
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2020-09-12 |
| First published | 2020-09-12 |
| Weekly downloads | 0 |
| License | GPL-3.0-or-later |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 50.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | Baris Tuna |
| Maintainers | baristna |
| Keywords | react, react-hook, react-hooks, custom |

## Links

- npm: https://www.npmjs.com/package/use-animate-number
- Repository: https://github.com/baristna/use-animate-number
- Homepage: https://github.com/baristna/use-animate-number#readme
- Issues: https://github.com/baristna/use-animate-number/issues
- npm.io page: https://npm.io/package/use-animate-number

## 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.5 (latest) — 2020-09-12
- 1.0.3-beta.1 (beta) — 2020-09-12
- 1.0.4 — 2020-09-12
- 1.0.3-beta.0 — 2020-09-12
- 1.0.3 — 2020-09-12
- 1.0.2 — 2020-09-12
- 1.0.1 — 2020-09-12
- 1.0.0 — 2020-09-12

## README

# useAnimateNumber react hook

<a href="https://www.npmjs.com/package/use-animate-number"><img alt="npm" src="https://img.shields.io/npm/v/use-animate-number.svg"></a>

A <a href="https://reactjs.org/docs/hooks-intro.html">React Hook</a> for making value change smoothly to create animation base

<hr />

- <a href="#installation">Installation</a>
- <a href="#options">Options</a>
- <a href="#skip-animation">Skip Animation</a>

<hr/>

When creating a custom animation with react, `useAnimateNumber` hook handle tha value change from the start value
to the end smoothly with easing functions.


### Installation
```
$ yarn add use-animate-number
```

It's like `useState` with `number` type.<br /><br />


Import
```js
import useAnimateNumber from 'use-animate-number';
```

Usage
```js
const Component = () => {
  const [value, setValue] = useAnimateNumber(0, options)
  return (...)
}
```


### Options

`options` object can be passed as second argument of the function to customize the animation.
Here are the default options;

```js
{
  duration: 1000,
  enterance: true,
  direct: false,
  disabled: false,
  decimals: 2;
}
```
| Name      | Type    | Default | Description                                                                                                 |
|-----------|---------|---------|-------------------------------------------------------------------------------------------------------------|
| duration  | number  | 1000    | Duration of animation to be done in milliseconds                                                            |
| enterance | boolean | true    | Will run animation to initial value from 0 at start.                                                        |
| direct    | boolean | false   | For simple usage, instead of using update function, it will animate the value when initial argument is set. |
| disabled  | boolean | false   | Disable the animation and value change will be done instantly.                                              |
| decimals  | number  | 2       | The decimal to be included to the calculation.                                                              |



### options.direct
If you don't need extra logic, you can ignore using the update function by setting `direct` option.

```js
const [animateValue] = useAnimateNumber(0, { direct: true });
```

### Skip Animation
To skip animation for a state update, second argument can be used.

```js 
const [value, setValue] = useAnimateNumber(0);

setCurrentValue(0, true); // It will instantly set the value as 0 in no time
setCurrentValue(100); // It will work as usual
```

---
_Source: https://npm.io/package/use-animate-number · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._