https://github.com/sbimochan/number-scroller

A lightweight react-component that animates your numbers.
https://github.com/sbimochan/number-scroller

Last synced: about 1 year ago
JSON representation

A lightweight react-component that animates your numbers.

• Host: GitHub
• URL: https://github.com/sbimochan/number-scroller
• Owner: sbimochan
• License: mit
• Created: 2019-02-09T05:58:33.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-05-01T20:58:50.000Z (about 2 years ago)
• Last Synced: 2025-04-12T03:11:21.256Z (about 1 year ago)
• Language: TypeScript
• Homepage:
• Size: 5.22 MB
• Stars: 6
• Watchers: 2
• Forks: 6
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# number-scroller

A very simple light weight react-component that animates your number updates.

![Scrolling Number](https://media.giphy.com/media/XZ02rGDvGc8bk9x8rq/giphy.gif)

## Installation

`yarn add number-scroller`

## See Prop Table and Storybook Examples Here!

https://number-scroller.netlify.app/

## Examples

### Simply supply a 'to' prop and it will scroll to that number (By default, it takes 1 second to reach the new value)

```javascript

import React, { useState } from 'react';

import NumberScroller from 'number-scroller';

const MyNumber = () => {

  const [number, setNumber] = useState(100);

  return (

    


      

    

  );

};

```


### Optionally, you can set the render interval manually (milliseconds between each render)

```javascript

import Reactfrom "react";

import NumberScroller from "number-scroller";

const MyNumber = () => {

  return (

    


      

    

  );

};

```


### Optionally, Customize the starting value with the 'from' prop (defaults from 0)

```javascript

import React from 'react';

import NumberScroller from 'number-scroller';

const MyNumber = () => {

  return (

    


      

    

  );

};

```


### Format the number with set number of decimals

```javascript

import React from 'react';

import NumberScroller from 'number-scroller';

const MyNumber = () => {

  return (

    


      

    

  );

};

```


### Format the number to a locale string such as currency

```javascript

import React from 'react';

import NumberScroller from 'number-scroller';

const MyCurrencyComponent = () => {

  return (

    


      

    

  );

};

```