react-horizontal-catalog-stepper v0.0.9

React Horizontal Catalog Stepper

This module is not ready for production use. Please use it at your own risk!

This is a fork of the react port of the horizontal time-line developed by CodyHouse.

Unlike the original repository, this stepper is meant for browsing a catalog styled component.

HorizontalTimeline

This will render a horizontal stepper with the labels (like chapter names) that you provide padded by a distance calculated based on the number of pages in each chapter (also passed as the prop values).

This is how it can be used.

const VALUES = [ 2, 5, 15, 4 ];
const LABELS = [ "Chapter 1", "Chapter 2", "Chapter 3", "Chapter 4" ];

export default class App extends React.Component {
  state = { value: 0, previous: 0 };

  render() {
    return (
      <div>
        {/* Bounding box for the Timeline */}
        <div style={{ width: '60%', height: '100px', margin: '0 auto' }}>
          <HorizontalTimeline
            index={this.state.value}
            indexClick={(index) => {
              this.setState({ value: index, previous: this.state.value });
            }}
            values={ VALUES }
            labels={ LABELS } />
        </div>
        <div className='text-center'>
          {/* any arbitrary component can go here */}
          {this.state.value}
        </div>
      </div>
    );
  }
}

For more advanced usage take a look at the demos directory.

Running the development version

• Just clone the repo and do an npm install (or yarn install)
• Note: You will need to do npm install react react-dom to install peerDependencies as both yarn and npm don't do this.
• Run npm run start/npm start/yarn start.
• Then go to localhost:5001/demos/<demo_name>/index.html to see the fruits of your labor.