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.
react-step-progress
Advanced tools
Readme
Multi step and dynamic progress indicator for react. Built using typescript, hooks and lots-o'-☕ and lots-o'-❤️ . Uses CSS modules so you don't have to worry about your CSS class names clashing with ours
npm install --save react-step-progress
NOTE: I'm working towards an implementation where you don't have to import the stylesheet explicitly. I feel like that's not an ideal solution. Feel free to help me out 😁
// import the progress bar
import StepProgressBar from 'react-step-progress';
// import the stylesheet
import 'react-step-progress/dist/index.css';
// setup the step content
const step1Content = <h1>Step 1 Content</h1>;
const step2Content = <h1>Step 2 Content</h1>;
const step3Content = <h1>Step 3 Content</h1>;
// setup step validators, will be called before proceeding to the next step
function step2Validator() {
// return a boolean
}
function step3Validator() {
// return a boolean
}
function onFormSubmit() {
// handle the submit logic here
// This function will be executed at the last step
// when the submit button (next button in the previous steps) is pressed
}
// render the progress bar
<StepProgressBar
startingStep={0}
onSubmit={onFormSubmit}
steps={[
{
label: 'Step 1',
subtitle: '10%',
name: 'step 1',
content: step1Content
},
{
label: 'Step 2',
subtitle: '50%',
name: 'step 2',
content: step2Content,
validator: step2Validator
},
{
label: 'Step 3',
subtitle: '100%',
name: 'step 3',
content: step3Content,
validator: step3Validator
}
]}
/>;
startingStep (number
) - the index of the step at which to start
steps (ProgressStep[]
) - array of steps with each step containing a label, name and content
onSubmit (function
) - function to be executed on the last step, simulating the submit of the form
wrapperClass (string
) - CSS class name for progress wrapper element
progressClass (string
) - CSS class name for progress bar element
stepClass (string
) - CSS class name for step indicator
labelClass (string
) - CSS class name for step label
subtitleClass (string
) - CSS class name for step subtitle
contentClass (string
) - CSS class name for step content element
buttonWrapperClass (string
) - CSS class name for action buttons wrapper element
primaryBtnClass (string
) - CSS class name for primary themed button
secondaryBtnClass (string
) - CSS class name for secondary themed button
previousBtnName (string
) - Change the text inside the previous button
nextBtnName (string
) - Change the text inside the next button
👤 Gaurav Saini
Give a ⭐️ if this project helped you!
FAQs
Multi step and dynamic progress indicator for react
The npm package react-step-progress receives a total of 1,099 weekly downloads. As such, react-step-progress popularity was classified as popular.
We found that react-step-progress demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.