# react-rolling-numbers-onscroll

> react rolling numbers onscroll

Latest version **1.3.0** (published 2023-10-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-rolling-numbers-onscroll
pnpm add react-rolling-numbers-onscroll
yarn add react-rolling-numbers-onscroll
bun add react-rolling-numbers-onscroll
```

## 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.3.0 |
| Published | 2023-10-07 |
| First published | 2023-08-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 8.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ledurts-sti |
| Maintainers | ledurts |
| Keywords | react, rolling, numbers, onscroll |

## Links

- npm: https://www.npmjs.com/package/react-rolling-numbers-onscroll
- Repository: https://github.com/suti1979/react-rolling-numbers-onscroll
- Homepage: https://github.com/suti1979/react-rolling-numbers-onscroll#readme
- Issues: https://github.com/suti1979/react-rolling-numbers-onscroll/issues
- npm.io page: https://npm.io/package/react-rolling-numbers-onscroll

## Dependencies (1)

- [react-intersection-observer](https://npm.io/package/react-intersection-observer.md) ^9.5.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.3.0 (latest) — 2023-10-07
- 1.2.6 — 2023-10-07
- 1.2.5 — 2023-09-13
- 1.2.4 — 2023-09-13
- 1.2.2 — 2023-09-13
- 1.2.1 — 2023-09-13
- 1.2.0 — 2023-08-17
- 1.1.1 — 2023-08-12
- 1.1.0 — 2023-08-12
- 1.0.0 — 2023-08-11

## README

# React rolling numbers onscroll (NPM package)

A React component for animate (roll) numbers from zero (or the "from" number) to the actual number.

Animation starts, when the element is in the view.

You can add an "easeOut" prop for a smooth ending.

Try it on Codesandbox: https://codesandbox.io/p/sandbox/npm-package-react-rolling-numbers-onscroll-jxmzpm

### Install:

```console
npm install react-rolling-numbers-onscroll
or
yarn add react-rolling-numbers-onscroll
```

### Import:

```js
import RollingNumbers from 'react-rolling-numbers-onscroll'
```

### Usage:

```jsx
<RollingNumbers to={42} />
<RollingNumbers to={42} from={-42} />
<RollingNumbers to={42} from={-42} millis={4000} />
<RollingNumbers to={-42} from={42} millis={4000} easeOut />
```

### Props (all optional):

```console
- to (or num): Integer to roll up from 0
- from: Integer roll to "num"
- millis: milliseconds for animation effect. By default it is 500.
- easeOut: ease out the end of the animation
```

Feel free to ask or contribute.

### CHANGELOG:

- 1.0.0 - Base version
- 1.1.0 - Added "from" prop.
  - 1.1.1 - Update readme
- 1.2.0 - Added "ease Out" function. Added "to" prop instead of "num" prop. The "num" prop still works, so it's not a breaking change. You can use either of them, it just makes more sense to use "to" prop.
  - 1.2.1 - Changed import for mjs.

-1.3.0 - Fixed package.json for react 16 to 18.

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