react-stateful-wizard v1.0.3

React Simple wizard

Introduction

This is a simple stateful react wizard with zero styling. It uses the React hooks and enable you to update the state for each step. You will be able to access all the states modified in each step. How to use this.

For more information and example please visit the repository.

How to use this

First of all install this using npm or yarn

npm i react-stateful-wizard
yarn add react-stateful-wizard

  import { Wizard, WizardProps, StepsProps } from "react-simple-wizard"


  const Step1: React.FC<StepsProps> = (props) => {
    return <h1>Start</h1>;
  };

  const SimpleWatch: React.FC<StepsProps> = ({ state, setState }) => {
    setInterval(() => setState(new Date()), 100);

    return (
      <>
        <h2>A simple digital clock</h2>
        <p>{(state ?? new Date()).toLocaleTimeString()}</p>
      </>
    );
  };

  const wizardProps: WizardProps = {
    showNavigationOrientation: 'bottom',
    showNavigationLinks: true,
    steps: [
    Step1,
    SimpleWatch,
      (props) => {
        return (
          <>
            <h1>Step 1</h1>
            <pre>{JSON.stringify(props.getAllStates(), null, 2)}</pre>
          </>
        );
      },
      (props) => {
        return (
          <>
            <h1>Step 2</h1>
            <pre>{JSON.stringify(props.getAllStates(), null, 2)}</pre>
          </>
        );
      },

      (props) => {
        return (
          <>
            <h1>Complete your review</h1>
            <pre>{JSON.stringify(props.getAllStates(), null, 2)}</pre>
          </>
        );
      },
    ],
  };

    <Wizard wizardProps={wizardProps} />

Components properties and details

Wizard Properties (WizardProps)

StepsProps

Url Navigation

As it is a single page application you can navigate to any step by using the HTML5 single page naviagtion. Consider below example

  const Step1 = (props) => {
    return <h1>Step 1</h1>
  }

  const Step2 = (props) => {
    return <h1>Step 2</h1>
  }

  const wizardProps : WizardProps = { steps = [Step1,Step2]}
  <Wizard wizardProps={wizardProps} />

Now if you are on the Step2 then in the address bar if you type

http://localhost:1234/#/Step1 

This will take you to Step 1. In next release my aim is to improve this!