horizontal-stepper

horizontal-stepper is a simple stepper component using react, which takes an array of steps title and a function that returns the body to be displayed in the stepper at every step. Input - 1) steps title in string array 2) stepContent function that returns the body to be displayed in the stepper at every step.

Installation

yarn add horizontal-stepper

Usage

import React, { Component } from 'react';
import './App.css';
import Stepper from 'anandd';
 
class App extends Component {
 
  steps = [{ title: 'First Step' }, { title: 'Second Step' }, { title: 'Third Step' }, { title: 'Fourth Step' }];
 
  getStepContent = (step) => {
    switch (step) {
      case 0:
        return <div>First Step</div>
      case 1:
        return <div>Second Step</div>
      case 2:
        return <div>Third Step</div>
      case 3:
        return <div>Fourth Step</div>
      default:
        return "Unknown step";
    }
  }
 
  render() {
    return (
      <div className="App">
        <Stepper steps={this.steps} stepContent={this.getStepContent}/>
      </div>
    );
  }
}
 
export default App;

Development

yarn
yarn dev

Test

yarn test

Build

yarn
yarn build

Publish

npm login
npm version patch
git add -A
git push origin master
npm publish