https://github.com/heyman333/react-animated-numbers

👾 Library showing animation of number changes in react.js
https://github.com/heyman333/react-animated-numbers

animation react

Last synced: 6 days ago
JSON representation

👾 Library showing animation of number changes in react.js

• Host: GitHub
• URL: https://github.com/heyman333/react-animated-numbers
• Owner: heyman333
• License: mit
• Created: 2020-08-21T00:54:16.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-01-27T00:21:12.000Z (12 months ago)
• Last Synced: 2024-10-30T02:36:46.274Z (2 months ago)
• Topics: animation, react
• Language: JavaScript
• Homepage:
• Size: 600 KB
• Stars: 245
• Watchers: 3
• Forks: 30
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        












# react-animated-numbers

Library showing animation of number changes in react.js

## Props

|      name       |               type               | default | description                                                                                                                                    |

| :-------------: | :------------------------------: | :-----: | ---------------------------------------------------------------------------------------------------------------------------------------------- |

| animateToNumber |              number              |  none   | Number to be animated                                                                                                                          |

|    fontStyle    |       React.CSSProperties?       |  none   | Style of number text                                                                                                                           |

|  includeComma   |             boolean?             |  false  | A value that determines whether to show a comma or not.                                                                                        |

|     locale      |             string?              |  en-US  | Formats animated number as per locale. Also it should be used with `inculdeComma` prop. For list of locales, search for "BCP 47 language tags" |

|   transitions   | (index: number) => Transition$1? |  none   | framer-motion [transitions](https://www.framer.com/motion/transition/). The order of numbers shown is passed as a parameter.                   |

|    className    |             string?              |  none   | ClassName for style                                                                                                                            |

### Next JS (< v13.x.x )

You have to use dynamic imports to ensure that this library is imported on the client side only.

Import the library like this:

```

import dynamic from "next/dynamic";

const AnimatedNumbers = dynamic(() => import("react-animated-numbers"), {

  ssr: false,

});

```

Credit to @jedwardblack for [this](https://github.com/heyman333/react-animated-numbers/issues/40)

### Next JS (>= v13.x.x )

Use the library like this:

```

"use client";

import AnimatedNumbers from "react-animated-numbers"

```

### Example

```jsx

import React from "react";

import AnimatedNumbers from "react-animated-numbers";

import "./App.css";

function App() {

  const [num, setNum] = React.useState(331231);

  return (

    


       ({

          type: "spring",

          duration: index + 0.3,

        })}

        animateToNumber={number}

        fontStyle={{

          fontSize: 40,

          color: "red",

        }}

      />

      


         setNum((state) => state + 31234)}>+

         setNum((state) => state - 31234)}>-

      

    

  );

}


export default App;

```

### GIF

![test](./images/example.gif)

## Todo

- [ ] test code

- [x] start animation when dom is visible