rc-steps

What is rc-steps?

The rc-steps npm package is a React component library for creating step or progress indicators in web applications. It provides a simple and customizable way to display steps or progress in a sequence, which is commonly used in multi-step forms, wizards, or processes.

What are rc-steps's main functionalities?

Basic Step Indicator

This code sample demonstrates how to create a basic step indicator with three steps, where the second step is marked as the current step. Each step has a title and a description.

import React from 'react';
import Steps, { Step } from 'rc-steps';

const BasicSteps = () => (
  <Steps current={1}>
    <Step title='Step 1' description='This is a description.' />
    <Step title='Step 2' description='This is a description.' />
    <Step title='Step 3' description='This is a description.' />
  </Steps>
);

export default BasicSteps;

Vertical Step Indicator

This example shows how to set up a vertical step indicator. The steps are arranged vertically, and the current step is highlighted.

import React from 'react';
import Steps, { Step } from 'rc-steps';

const VerticalSteps = () => (
  <Steps direction='vertical' current={1}>
    <Step title='Step 1' description='This is a description for step 1.' />
    <Step title='Step 2' description='This is a description for step 2.' />
    <Step title='Step 3' description='This is a description for step 3.' />
  </Steps>
);

export default VerticalSteps;

Other packages similar to rc-steps

react-step-wizard

react-step-wizard is another React component library for creating step-based components. Unlike rc-steps, which primarily focuses on displaying step indicators, react-step-wizard provides more functionalities for managing step transitions and state between steps, making it more suitable for complex wizards.

react-stepper-horizontal

react-stepper-horizontal offers a way to create horizontal stepper components. It is similar to rc-steps but focuses more on the visual aspect, providing more options for customizing the appearance of the stepper, such as line styles and icons.

README

rc-steps

React steps component.

Usage

npm install rc-steps

<Steps current={1}>
  <Steps.Step title="first" />
  <Steps.Step title="second" />
  <Steps.Step title="third" />
</Steps>

Example

https://react-component.github.io/steps/

API

name	type	default	description
type	string	default	diretypetion of Steps, could be `default` `navigation` `inline`
direction	string	horizontal	direction of Steps, enum: `horizontal` or `vertical`
current	number	0	index of current step
initial	number	0	index initial
size	string		size of Steps, could be `small`
labelPlacement	string		placement of step title, could be `vertical`
status	string	wait	status of current Steps, could be `error` `process` `finish` `wait`
icons	{ finish: ReactNode, error: ReactNode }		specify the default finish icon and error icon
itemRender	(item: StepProps, stepItem: React.ReactNode) => React.ReactNode		custom step item renderer
onChange	(current: number) => void		Trigger when Step changed

Steps.Step

name	type	default	description
title	ReactNode		title of step item
subTitle	ReactNode		subTitle of step item
description	ReactNode		description of step item
icon	ReactNode		set icon of step item
status	string		status of current Steps, could be `error` `process` `finish` `wait`
tailContent	ReactNode		content above tail
disabled	bool	false	disabled step when onChange exist
render	(stepItem: React.ReactNode) => React.ReactNode		custom step item renderer

Development

npm install
npm start

License

rc-steps is released under the MIT license.