React-responsive-steppers NPM

React Responsive Steppers

A Fully Responsive Horizontal and Vertical Stepper

Installation

Install react-responsive-steppers with npm

  npm install react-responsive-steppers

    import React from 'react';
import {Stepper, Step} from 'react-responsive-steppers';

function App(){
     const [activeStep, setActiveStep]=useState(0);
     return(
    <Stepper variant={"horizontal"} activeStep={activeStep} setStep={setActiveStep}>
     <Step>1</Step>
     <Step>2</Step>
     <Step>3</Step>
    </Stepper>
)}

Props

Stepper

Name	Type	Description	Default
stepSize	string/object	must be in px	`{ xxl: '55px', xl: '50px', lg: '45px', md: '40px', sm: '30px', xs: '25px' }`
disabledStepColor	string	must be color	`lightgray`
disabledTextColor	string	must be color	`gray`
stepColor	string	must be color	`blue`
stepTextColor	string	must be color	`white`
activeStep	number	must start from zero	`undefined`
setStep	func	must be function	`undefined`
variant	string	vertical / horizontal	`horizontal`

Step

Name	Type	Description	Default
onClick	func	must be function	`undefined`
label	number	must be number	`undefined`
children	string	must be string	`undefined`
content	element	it is required in vertical stepper	`undefined`

Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

Please adhere to this project's code of conduct.

react component responsive stepper horizontal stepper vertical stepper responsive steppers react responsive steppers

@babel/polyfill prop-types react

1.0.1

3 years ago

1.0.0

3 years ago