react-pacman-progress

Simple React component for a fun progress indicator.

Demo

Install

npm install react-pacman-progress --save

or

bower install react-pacman-progress --save

Example

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});
  }
});

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 for an idea on how to style this component.

---

MIT Licensed