Simple React component for a fun progress indicator.
npm install react-pacman-progress --save
or
bower install react-pacman-progress --save
Controlled usage:
var PacmanProgress = require('react-pacman-progress');
var App = React.createClass({
getInitialState() {
return {currentIndex: 0};
},
render() {
var slides = [
{color: '#c0ffee'},
{color: '#deface'},
{color: '#0ff1ce'}
]
return (
<div className="container" onCLick={this.handleClick}>
{
slides.map(function(slide, i) {
return <Slide index={i} currentIndex={this.state.currentIndex} color={slide.color} />;
}.bind(this))
}
<PacmanProgress items={slides.length} currentIndex={this.state.currentIndex} />
</div>
);
},
handleClick: function() {
this.setState({currentIndex: this.state.currentIndex + 1});
}
});
Namespace for CSS classes, optional, default is `` i.e CSS classes are '' + 'pacman'
.
Number of dots for pacman to eat. required
Position of the pacman. Start at 0. required
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});
}
Look at react-pacman-progress.css for an idea on how to style this component.
MIT Licensed