A simple react stepper component for multi-step forms inspired by the Stepper component from Material-UI.

For examples of react-form-stepper go to: https://m0ky.github.io/react-form-stepper/.

Install the library by running:

npm install react-form-stepper --save

or

yarn add react-form-stepper

import { Stepper } from 'react-form-stepper';

There are 2 possible ways of defining the steps in the Stepper component:

• Using the steps prop
• Using the Stepper as a HOC with Step as children

<Stepper
  steps={[{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }]}
  activeStep={2}
/>

<Stepper activeStep={1}>
  <Step label="Children Step 1" />
  <Step label="Children Step 2" />
  <Step label="Children Step 3" />
</Stepper>

When developing an SSR application with a framework like Next.js you might face your console being polluted with the following message Warning: [JSS] Rule is not linked. Missing sheet option "link: true". caused by the underlying dependency react-jss. A workaround is to use the dynamic import module like in the example below.

// CustomStepper.js
const CustomStepper = () => {
  return <Stepper steps={[{ label: 'Step 1' }, { label: 'Step 2' }]} activeStep={1} />;
};

export default CustomStepper;

// MultiStepForm.js
import dynamic from 'next/dynamic';

const StepperComponent = dynamic(() => import('./CustomStepper'), {
  ssr: false,
});