https://github.com/rbpaul2/react-number-ticker
Drop-in react component for displaying numbers with animated transitions.
https://github.com/rbpaul2/react-number-ticker
animation css3 javascript module node npm react ticker transition
Last synced: 5 months ago
JSON representation
Drop-in react component for displaying numbers with animated transitions.
- Host: GitHub
- URL: https://github.com/rbpaul2/react-number-ticker
- Owner: rbpaul2
- Created: 2018-07-14T18:24:52.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-18T20:56:29.000Z (almost 8 years ago)
- Last Synced: 2025-10-22T15:43:56.022Z (9 months ago)
- Topics: animation, css3, javascript, module, node, npm, react, ticker, transition
- Language: JavaScript
- Size: 250 KB
- Stars: 8
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# react-number-ticker
[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]
Drop-in react component for displaying numbers with animated transitions.
![alt text][logo]
[logo]: https://github.com/rbpaul2/react-number-ticker/raw/master/preview-react-number-ticker-1.0.0.gif "Clock Demo"
[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo
[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package
[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo
# How to use
## In a basic html page
Include the UMD build in the `` section of your html (also includes React, CSSTransitionGroup)
```html
```
Include the CSS file (Ticker uses CSS3 transition animations when changing digits)
```html
```
Write the something like this in the body of your html:
```html
ReactDOM.render(
React.createElement(ReactNumberTicker),
document.getElementById('root')
);
```
# Use Cases
- Dynamic numbers that change with user input
- Timers
- (potentially) Sequence of words