Skip to content
Simple react.js component for a fun prgress indicator
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
.gitignore
README.md
bower.json
package.json
react-pacman-progress.css
react-pacman-progress.js

README.md

react-pacman-progress

Simple React component for a fun progress indicator.

Demo

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

You can’t perform that action at this time.