Try it here
To use this module in your app run:
npm install react-multistep| Prop | Type | Required? | Notes |
|---|---|---|---|
showNavigation |
boolean |
false |
|
steps |
[{ component: React.Node, name?: string, valid?: boolean }] |
true |
|
activeStep |
number |
false |
Defaults to 0. |
handleStep |
(step: number) => void |
true |
Allows parent component to control step transitions. |
It takes an array of objects representing individual steps:
const steps = [
{ name: "StepOne", component: <StepOne /> },
{ name: "StepTwo", component: <StepTwo /> },
{ name: "StepThree", component: <StepThree /> },
{ name: "StepFour", component: <StepFour /> },
];
const StepComp = (props) => {
const [step, setStep] = useState(0);
return (
<MultiStep.Provider>
showNavigation={true}
steps={steps}
activeStep={step}
handleStep={setStep}
>
<MultiStep.Status />
<MultiStep.Step style={{}} className="" />
<MultiStep.NavButtons
style={{}}
className=""
prevStyle={{}}
prevClassName=""
nextStyle={{}}
nextClassName=""
/>
</MultiStep.Provider>
);
};- Start by cloning the repo locally:
//--step 1
git clone https://github.com/srdjan/react-multistep.git //clone the repo
cd react-multistep //navigate to the project folder- Next, install dependencies and build the component:
npm install
npm run build // (or, `npm run build:prod` for optimized build)- On a succesful build, navigate to the example folder and try it:
cd ../example
npm install
npm start- Now you can open the example in your favorite browser:
open index.html