Step Wizard for React
Getting Started
These instructions will get you a copy of the component up and running on your local machine.
Installing
You can install step-wizard-react component by npm or yarn.
npm i step-wizard-react
yarn add step-wizard-react
After download, step-wizard-react will be ready to use in your React applications.
Usage
Add the step-wizard-react component to the page you want to use.
import Wizard from "step-wizard-react";
Step Wizard React takes all your needs from you.
Thus, it allows you to make all design changes or positioning as you wish.
Required fields expected from you:
- values: The structure you want to split into steps. You can view the examples here.
- nextButtonRef: The reference of the button to click to proceed to the next step.
- backButtonRef: The reference of the button to click to move to the previous step.
The simplest example use:
import React, { useRef } from "react";
import Wizard from "step-wizard-react";
const App = () => {
const nextButtonRef = useRef();
const backButtonRef = useRef();
const values = {
"Step 1": "Hello!",
"Step 2": "Your description",
"Step 3": <h3>You have completed all the steps.</h3>,
};
return (
<React.StrictMode>
<Wizard
values={values}
nextButtonRef={nextButtonRef}
backButtonRef={backButtonRef}
/>
<button ref={backButtonRef}>Back</button>
<button ref={nextButtonRef}>Next</button>
</React.StrictMode>
);
};
export default App;
Versioning
We use GitHub for versioning.
Authors
License
Licensed under the MIT license, see LICENSE for details.