Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@keyvaluesystems/react-vertical-stepper
Advanced tools
Readme
A fully customizable ready to use vertical stepper UI package for React. Try tweaking a vertical stepper using this codesandbox link here
npm install react-vertical-stepper
You’ll need to install React separately since it isn't included in the package.
React Vertical Stepper can run in a very basic mode by just providing the steps
and currentStepIndex
props like this:
import React, { useState } from 'react';
import Stepper from 'react-vertical-stepper';
function App() {
const [currentStepIndex, setCurrentStepIndex] = useState(0);
stepsArray = [{
label: 'Step 1',
description: 'This is Step 1',
status: 'completed'
},{
label: 'Step 2',
description: 'This is Step 2',
status: 'visited'
},{
label: 'Step 3',
description: 'This is Step 3',
status: 'unvisited'
}];
return (
<Stepper
steps={stepsArray}
currentStepIndex={currentStepIndex}
/>
);
}
export default App;
The steps
array is an array of objects with basic keys like
label
- a string that can be shown as step label title to your step indicatordescription
- a string that can be show as step description below the step labelstatus
- can be provided with any of visited
, unvisited
, completed
. Will be required if you are using default styles.Note: You can also add any other keys to the step object and other statuses like
skipped
for different customizations as per requirements
You can customize the step indicator bubble with your own DOM element using the renderBubble
prop
<Stepper
steps={stepsArray}
currentStepIndex={currentStepIndex}
renderBubble={(step, stepIndex) => (<div key={stepIndex}>{step.label}</div>)}
/>
The step
param provided by the renderBubble
callback is the same object you pass as array item in steps
prop.
Props that can be passed to the component are listed below:
Prop | Description | Default |
---|---|---|
steps: object[] | An array of step objects to render. | undefined |
currentIndex: number | The index of current active step. | 0 |
onStepClick?: (step: object, stepIndex: number): void | A step click handler that fires each time you click on a step, its label or its description. | undefined |
renderBubble?: (step: object, stepIndex: number): ReactElement | A render function to customize your step indicator with your own element. | undefined |
labelPosition?: 'left' | 'right' |
Allows you to align step label and description to either left or right of step indicator
| right |
styles?: object | Provides you with a bunch of callback functions to override the default styles. | undefined |
All the default styles provided by this package are overridable using the style
prop
the below code shows all the overridable styles:
import React from 'react';
import Stepper from 'react-vertical-stepper';
function App() {
const stylesOverride = {
LabelTitle: (step, stepIndex) => ({...styles}),
ActiveLabelTitle: (step, stepIndex) => ({...styles}),
LabelDescription: (step, stepIndex) => ({...styles}),
ActiveLabelDescription: (step, stepIndex) => ({...styles}),
LineSeparator: (step, stepIndex) => ({...styles}),
InactiveLineSeparator: (step, stepIndex) => ({...styles}),
Bubble: (step, stepIndex) => ({...styles}),
ActiveBubble: (step, stepIndex) => ({...styles}),
InActiveBubble: (step, stepIndex) => ({...styles}),
};
return (
<Stepper
steps={stepsArray}
currentStepIndex={currentStepIndex}
styles={stylesOverride}
/>
);
}
export default App;
LabelTitle
- overrides the step label styleActiveLabelTitle
- overrides the step label style of current active stepLabelDescription
- overrides the step description styleActiveLabelDescription
- overrides the step description style of current active stepLineSeparator
- overrides default step connector line stylesInactiveLineSeparator
- overrides styles of step connector line after current active stepBubble
- overrides default styles of step indicatorActiveBubble
- overrides default styles of step indicator of current active stepInActiveBubble
- overrides default styles of step indicator that has unvisited
step statusFAQs
A fully customizable vertical stepper component
The npm package @keyvaluesystems/react-vertical-stepper receives a total of 63 weekly downloads. As such, @keyvaluesystems/react-vertical-stepper popularity was classified as not popular.
We found that @keyvaluesystems/react-vertical-stepper demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.