React-number-ticker NPM

react-number-ticker

Drop-in react component for displaying numbers with animated transitions.

alt text

How to use

In a basic html page

Include the UMD build in the <head></head> section of your html (also includes React, CSSTransitionGroup)

<script src="https://unpkg.com/react-number-ticker@1.0.0/umd/react-number-ticker.min.js"></script>

Include the CSS file (Ticker uses CSS3 transition animations when changing digits)

<script src="https://unpkg.com/react-number-ticker@1.0.0/umd/main.css"></script>

Write the something like this in the body of your html:

<body>
  <div id="root"></div>
  <script>
    ReactDOM.render(
      React.createElement(ReactNumberTicker),
      document.getElementById('root')
    );
  </script>
</body>

Use Cases

Dynamic numbers that change with user input
Timers
(potentially) Sequence of words

react-component

react-spring

@infinitebrahmanuniverse/nolb-react-nu @everything-registry/sub-chunk-2601

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago