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

Development

npm install
npm start

Usage

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

Example

http://localhost:8002/examples

online example: http://react-component.github.io/steps/examples/

License

rc-steps is released under the MIT license.