# react-form-stepper > React stepper component for multiple step forms Latest version **2.0.3** (published 2022-05-31) · MIT license · 0 weekly downloads ## Install ```sh npm install react-form-stepper pnpm add react-form-stepper yarn add react-form-stepper bun add react-form-stepper ``` ## Health **Score 45/100 (D)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score. Warnings: low downloads. Negative: abandoned. ## Facts | | | |---|---| | Version | 2.0.3 | | Published | 2022-05-31 | | First published | 2019-10-28 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 3 | | Unpacked size | 181.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 146 | | Author | M0kY | | Maintainers | moky | | Keywords | react, component, stepper, form, step, wizard | ## Links - npm: https://www.npmjs.com/package/react-form-stepper - Repository: https://github.com/M0kY/react-form-stepper - Homepage: https://github.com/M0kY/react-form-stepper#readme - Issues: https://github.com/M0kY/react-form-stepper/issues - npm.io page: https://npm.io/package/react-form-stepper ## Dependencies (3) - [clsx](https://npm.io/package/clsx.md) ^1.1.1 - [color](https://npm.io/package/color.md) ^3.2.1 - [react-jss](https://npm.io/package/react-jss.md) ^10.9.1-alpha.2 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 2.0.3 (latest) — 2022-05-31 - 2.0.2 — 2022-05-31 - 2.0.1 — 2022-03-20 - 2.0.0 — 2022-03-20 - 1.4.3 — 2021-07-23 - 1.4.2 — 2021-07-23 - 1.4.1 — 2021-04-18 - 1.4.0 — 2021-03-17 - 1.3.0 — 2020-12-24 - 1.2.11 — 2020-11-28 - 1.2.10 — 2020-06-29 - 1.2.9 — 2020-06-29 - 1.2.8 — 2020-06-29 - 1.2.7 — 2020-06-29 - 1.2.6 — 2020-06-27 - … 9 more at https://npm.io/package/react-form-stepper/versions ## README # react-form-stepper ![version](https://img.shields.io/npm/v/react-form-stepper?color=brightgreen) ![GitHub Workflow Status (branch)](https://img.shields.io/github/workflow/status/M0kY/react-form-stepper/Release/master) ![David](https://img.shields.io/david/M0kY/react-form-stepper) ![David](https://img.shields.io/david/dev/M0kY/react-form-stepper) ![License](https://img.shields.io/npm/l/react-form-stepper?color=brightgreen) ![Downloads](https://img.shields.io/npm/dm/react-form-stepper) [![NPM](https://nodei.co/npm/react-form-stepper.png?downloads=true&stars=true)](https://nodei.co/npm/react-form-stepper/) A simple react stepper component for multi-step forms inspired by the Stepper component from Material-UI. ![react-form-stepper preview](https://raw.githubusercontent.com/M0kY/react-form-stepper/master/react-form-stepper-demo.png) ## Examples For examples of react-form-stepper go to: https://m0ky.github.io/react-form-stepper/. ## Getting started Install the library by running: ```sh npm install react-form-stepper --save ``` or ```sh yarn add react-form-stepper ``` ## Usage ```js 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 ```js ``` ### Using the Stepper as a HOC with Step as children ```js ``` ### 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. ```js // CustomStepper.js const CustomStepper = () => { return ; }; export default CustomStepper; ``` ```js // 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 | --- _Source: https://npm.io/package/react-form-stepper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._