Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
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.
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;
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 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.
React steps component.
npm install rc-steps
<Steps current={1}>
<Steps.Step title="first" />
<Steps.Step title="second" />
<Steps.Step title="third" />
</Steps>
https://react-component.github.io/steps/
name | type | default | description |
---|---|---|---|
type | string | default | diretypetion of Steps, enum: `default` or `navigation` |
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 | |
onChange | (current: number) => void | Trigger when Step changed |
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 |
npm install
npm start
rc-steps is released under the MIT license.
FAQs
steps ui component for react
The npm package rc-steps receives a total of 1,123,752 weekly downloads. As such, rc-steps popularity was classified as popular.
We found that rc-steps demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.