Skip to content

M0kY/react-form-stepper

master
Switch branches/tags
Code

react-form-stepper

version GitHub Workflow Status (branch) David David License Downloads

NPM

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

react-form-stepper preview

Examples

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

Getting started

Install the library by running:

npm install react-form-stepper --save

or

yarn add react-form-stepper

Usage

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

Using the steps prop

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

Using the Stepper as a HOC with Step as children

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

Using with SSR

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,
});

Stepper props

Props Options Default Description
steps [StepsDTO] none Array of objecst defining the steps
activeStep number 0 Value defining the active step
connectorStateColors boolean false Use different colors for connector lines based on adjacent steps state
className string none Add css classes to the Stepper component
stepClassName string none Add css classes to Step components
hideConnectors boolean |'inactive' false Value defining connectors visibility
nonLinear boolean false Allow users to enter the flow at any point
styleConfig StepStyleDTO --- Object containing Step style defaults
connectorStyleConfig ConnectorStyleProps --- Object containing Connector style defaults

ConnectorStyleProps

Props Options Default Description
disabledColor string '#bdbdbd' Define the disabled connector line color
activeColor string '#ed1d24' Define the active connector line color
completedColor string '#a10308' Define the completed connector line color
size React.ReactText 1 Define the thickness of the connector line
stepSize React.ReactText '2em' Value defaulting to the step size, used to calculate the padded space between the step and connector line start
style string 'solid' Define the style of the connector line

StepsDTO

Props Options Default Description
label string '' Value to be displayed under each step
active boolean false Value to indicate should the step be displayed as active
completed boolean false Value to indicate should the step be displayed as completed

StepStyleDTO

Props Options Default Description
activeBgColor string '#ed1d24' Define the background color for active steps
activeTextColor string '#ffffff' Define the text color for active steps
completedBgColor string '#a10308' Define the background color for completed steps
completedTextColor string '#ffffff' Define the background color for completed steps
inactiveBgColor string '#e0e0e0' Define the background color for inactive steps
inactiveTextColor string '#ffffff' Define the background color for inactive steps
size string or number '2em' Value representing the width and height of the step
circleFontSize string or number '1rem' Font size of the step content
labelFontSize string or number '0.875rem' Font size of step labels
borderRadius string or number '50%' Step border radius
fontWeight string or number 500 Step label font weight

Step props

Props Options Default Description
label string '' Value to be displayed under each step
active boolean false Value to indicate should the step be displayed as active
completed boolean false Value to indicate should the step be displayed as completed
index number 0 Index value of the step
className string none Add css classes to the Step component
children React.ReactNode Step index Value inside the step

About

Simple react stepper component for multi-step forms

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages