Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mathieudutour/react-pacman-progress
Simple react.js component for a fun prgress indicator
https://github.com/mathieudutour/react-pacman-progress
Last synced: 9 days ago
JSON representation
Simple react.js component for a fun prgress indicator
- Host: GitHub
- URL: https://github.com/mathieudutour/react-pacman-progress
- Owner: mathieudutour
- Created: 2015-08-12T09:53:30.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-20T14:14:01.000Z (over 7 years ago)
- Last Synced: 2024-10-17T16:13:55.042Z (26 days ago)
- Language: HTML
- Homepage: https://mathieudutour.github.io/react-pacman-progress
- Size: 410 KB
- Stars: 21
- Watchers: 3
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-pacman-progress
> Simple [React](http://facebook.github.io/react/index.html) component for a fun progress indicator.
### [Demo](https://mathieudutour.github.io/react-pacman-progress)
[](https://github.com/mathieudutour/react-pacman-progress/blob/master/example/index.html)
## Install
```bash
npm install react-pacman-progress --save
```
or
```bash
bower install react-pacman-progress --save
```
## Example
Controlled usage:
```javascript
var PacmanProgress = require('react-pacman-progress');
var App = React.createClass({
getInitialState() {
return {currentIndex: 0};
},
render() {
var slides = [
{color: '#c0ffee'},
{color: '#deface'},
{color: '#0ff1ce'}
]
return (
{
slides.map(function(slide, i) {
return ;
}.bind(this))
}
);
},
handleClick: function() {
this.setState({currentIndex: this.state.currentIndex + 1});
}
});
```
## API
### Props
##### classNamespace
Namespace for CSS classes, _optional_, default is `` i.e CSS classes are `'' + 'pacman'`.
##### items
Number of dots for pacman to eat. _required_
##### currentIndex
Position of the pacman. Start at 0. _required_
##### onClick
Function to call when clicking on a dot. _optional_, it takes 3 arguments:
* index of the dot clicked
* whether it was pacman which was clicked or not
* the event
```
handleClickPacman(index, isPacman, e) {
e.preventDefault();
this.setState({currentIndex: index});
}
```
## Styles
Look at [react-pacman-progress.css](https://github.com/mathieudutour/react-pacman-progress/blob/master/react-pacman-progress.css) for an idea on how to style this component.
---
MIT Licensed