Step-wizard-react NPM

Step Wizard for React

Getting Started

These instructions will get you a copy of the component up and running on your local machine.

Installing

You can install step-wizard-react component by npm or yarn.

npm i step-wizard-react
# or
yarn add step-wizard-react

After download, step-wizard-react will be ready to use in your React applications.

Usage

Add the step-wizard-react component to the page you want to use.

import Wizard from "step-wizard-react";

Step Wizard React takes all your needs from you. Thus, it allows you to make all design changes or positioning as you wish.

Required fields expected from you:

values: The structure you want to split into steps. You can view the examples here.
nextButtonRef: The reference of the button to click to proceed to the next step.
backButtonRef: The reference of the button to click to move to the previous step.

The simplest example use:

import React, { useRef } from "react";
import Wizard from "step-wizard-react";

const App = () => {
  const nextButtonRef = useRef();
  const backButtonRef = useRef();

  const values = {
    "Step 1": "Hello!",
    "Step 2": "Your description",
    "Step 3": <h3>You have completed all the steps.</h3>,
  };

  return (
    <React.StrictMode>
      <Wizard
        values={values}
        nextButtonRef={nextButtonRef}
        backButtonRef={backButtonRef}
      />

      <button ref={backButtonRef}>Back</button>
      <button ref={nextButtonRef}>Next</button>
    </React.StrictMode>
  );
};

export default App;