react-simple-step-wizard 🧙

A simple and composable step wizard in React! Made with ❤ in El Salvador 🇸🇻

[![Version][version-badge]][package]
[![Build][build-badge]][build]
[![Install Size][size-badge]][package-size]
[![Downloads][downloads-badge]][npmcharts]
[![PRs Welcome][prs-badge]][prs]
[![Commitizen friendly][cz-badge]][cz]
[![MIT License][license-badge]][license]

[![Watch on GitHub][github-watch-badge]][github-watch]
[![Star on GitHub][github-star-badge]][github-star]
[![Tweet][twitter-badge]][twitter]

Demo

Click here to see a live demo!

Getting Started

$3

``npm install -S react-simple-step-wizard`

`$3`

`javascript import Wizard from 'react-simple-step-wizard'; import React, { Component } from 'react';

const Step1 = () =>

This is Step 1

;
const Step2 = () => This is Step 2
;
const Step3 = () => This is Step 3
;
const Step4 = () => This is Step 4
;
const Step5 = () => This is Step 5
;
const Step6 = () => This is Step 6
;
const MyStepTracker = ({ currentStep = 0, steps = [] }) => (
  
    Current step is: {steps[currentStep]}

  

);
const MyNavigator = ({
  getFirstStepProps,
  getLastStepProps,
  getNextStepProps,
  getPrevStepProps,
}) => (
  
    
    
    
    
  

);
class App extends Component {
  state = { isCustomizeVisible: true };
  handleStepChange = currentStep => {
    console.log(currentStep);
  };
  onClick = () => {
    this.setState(prevState => ({
      isCustomizeVisible: !prevState.isCustomizeVisible,
    }));
  };
  render() {
    const { isCustomizeVisible } = this.state;
    return (
      

        react-simple-step-wizard demo

        
          Step 3 visible: {isCustomizeVisible.toString()}

          
        

        
          
          
            
            
            
            
            
              
              
            
          
          {/ You can implement your custom components via render-props /}
          
            {stepTrackerProps => }
          
          
            {navigatorProps => }
          
        
      

    );
  }
}

export default App;``

Roadmap

$3

Provide an accessible and composable API to be used with older react versions that don't support hooks.

$3

Rewrite lib core and expose some of the APIs using react hooks.

License

MIT © jonathanpalma

[downloads-badge]: https://img.shields.io/npm/dm/react-simple-step-wizard.svg?style=flat-square
[license-badge]: https://img.shields.io/npm/l/react-simple-step-wizard.svg?style=flat-square
[license]: https://github.com/jonathanpalma/react-simple-step-wizard/blob/master/LICENSE
[npmcharts]: http://npmcharts.com/compare/react-simple-step-wizard
[package-size]: https://packagephobia.now.sh/result?p=react-simple-step-wizard
[package]: https://www.npmjs.com/package/react-simple-step-wizard
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs]: http://makeapullrequest.com
[build-badge]: https://img.shields.io/circleci/build/gh/jonathanpalma/react-simple-step-wizard?style=flat-square
[build]: https://circleci.com/gh/jonathanpalma/react-simple-step-wizard
[cz-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square
[cz]: http://commitizen.github.io/cz-cli/
[size-badge]: https://flat.badgen.net/packagephobia/install/react-simple-step-wizard
[version-badge]: https://img.shields.io/npm/v/react-simple-step-wizard.svg?style=flat-square
[github-watch-badge]: https://img.shields.io/github/watchers/jonathanpalma/react-simple-step-wizard.svg?style=social
[github-watch]: https://github.com/jonathanpalma/react-simple-step-wizard/watchers
[github-star-badge]: https://img.shields.io/github/stars/jonathanpalma/react-simple-step-wizard.svg?style=social
[github-star]: https://github.com/jonathanpalma/react-simple-step-wizard/stargazers
[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20react-simple-step-wizard!%20https://github.com/jonathanpalma/react-simple-step-wizard
[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/jonathanpalma/react-simple-step-wizard.svg?style=social