react-use-wizard

A React wizard (stepper) builder without the hassle, powered by hooks.

Features

• Hooks
• Focused on logic
• No UI restrictions
• Written in TypeScript
• Documented, self explaining methods

Installation

yarn add react-use-wizard

Quickstart

import * as React from 'react';

import { Wizard } from 'react-use-wizard';

const App = () => (
  <Wizard>
    <Step1 />
    <Step2 />
    <Step3 />
  </Wizard>
);

const Step1 = () => {
  const { handleStep, previousStep, nextStep } = useWizard();

  // Attach an optional handler
  handleStep(() => {
    alert('Going to step 2');
  });

  return (
    <>
      <button onClick={previousStep}>Previous ⏮️</button>
      <button onClick={nextStep}>Next ⏭</button>
    </>
  );
};

Links

• API
• Playground
• Examples
• Async
• Animation
• Advanced

API

• Wizard
• useWizard

Wizard

Wizard is used to wrap your steps. Each child component will be treated as an individual step. You can pass a shared footer and header component that should always be in your steps.

Example: pass a footer component that contains a "previous" and "next" button to the wizard.

Props

Example

// Example: show the active step in this component
const Header = () => <p>I am the header component</p>;

const Footer = () => <p>I am the footer component</p>;

const App = () => {
  return (
    <Wizard startIndex={0} header={<Header />} footer={<Footer />}>
      <Step1 />
      <Step2 />
      <Step3 />
    </Wizard>
  );
};

useWizard

Used to retrieve all methods and properties related to your wizard. Make sure Wizard is wrapped around your component when calling useWizard.

Remark - You can't use useWizard in the same component where Wizard is used.

Methods

Example

import * as React from 'react';

import { Wizard, useWiard } from 'react-use-wizard';

const App = () => (
  <Wizard>
    <Step1 />
    <Step2 />
    <Step3 />
  </Wizard>
);

const Step1 = () => {
  const {
    isLoading,
    isLastStep,
    isFirstStep,
    activeStep,
    previousStep,
    nextStep,
    handleStep,
  } = useWizard();

  handleStep(() => {
    alert('Going to step 2');
  });

  return (
    <>
      <p>Step 1</p>
      {isLoading && <p>loading...</p>}
      <button onClick={previousStep}>Previous</button>
      <button onClick={nextStep}>Next</button>
      <div>
        Has next step: {!isLastStep ? '✅' : '⛔'}
        <br />
        Has previous step : {!isFirstStep ? '✅' : '⛔'}
      </div>
      Active step: {activeStep + 1} <br />
    </>
  );
};

It's recommended to pass the shared components to the header or footer in the Wizard to avoid duplication.

Examples

Go to examples to check see some examples

Async

You can attach an async step handler to a step as well. Make sure to make to either pass an async function or return a promise (async) function:

const Step1 = () => {
  const { handleStep } = useWizard();

  // Async function
  handleStep(async () => {
    await fetch(...);
  });

  // OR

  // Return promise
  handleStep(() => {
    return fetch(...);
  });

  ...
}

Errors

If no errors are thrown then the wizard will go to the next step, so no need to call nextStep by yourself.

If an error is thrown in the conencted function the wizard will just stay at the same step and will rethrow the error. (So you can try-catch in your attached function).

IsLoading

If an async function is attached to handleStep the isLoading property will indicate the loading state of the function. In general isLoading will reflect the handler promise state: will be true if the handler promise is pending and false when the handler is either fulfilled or rejected.

Animation

Since react-use-wizard is focused to manage the logic of a wizard it doesn't mean you can't add some animation by your own. Add any animation library that you like. I highly suggest framer-motion to add your animations.

Checkout this example to see how a step can be animated with framer motion.