react-form-stepper
Version:
React stepper component for multiple step forms
146 lines (111 loc) • 8 kB
Markdown
[](https://nodei.co/npm/react-form-stepper/)
A simple react stepper component for multi-step forms inspired by the Stepper component from Material-UI.
## 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
```js
<Stepper
steps={[{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }]}
activeStep={2}
/>
```
```js
<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.
```js
// CustomStepper.js
const CustomStepper = () => {
return <Stepper steps={[{ label: 'Step 1' }, { label: 'Step 2' }]} activeStep={1} />;
};
export default CustomStepper;
```
```js
// MultiStepForm.js
import dynamic from 'next/dynamic';
const StepperComponent = dynamic(() => import('./CustomStepper'), {
ssr: false,
});
```
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |