Welcome folks today in this blog post we will be using the react-step-progress
library to integrate multi-step progressbar
with validation in browser using javascript. All the full source code
of the application is shown below.
Get Started
In order to get started you need to make a new react.js
app using the below command as shown below
npx create-react-app sampleapp
cd sampleapp
And after that you need to install the below library
using the below command as shown below
npm i react-step-progress
And after that you will see the below directory
structure of the react.js app as shown below
Showing Multi-Step Progressbar
Now we can modify the App.js
file and copy paste the following code
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
// import the progress bar import StepProgressBar from 'react-step-progress'; // import the stylesheet import 'react-step-progress/dist/index.css'; export default function App (){ // setup the step content const step1Content = <h1>This is Content 1</h1>; const step2Content = <h1>This is Content 2</h1> const step3Content = <h3>This is Content 3</h3>; function step1Validator() { return true } function step3Validator() { return true } function onFormSubmit() { alert("form is submitted") } return ( // render the progress bar <StepProgressBar startingStep={0} onSubmit={onFormSubmit} steps={[ { label: 'Step 1', subtitle: '10%', name: 'step 1', content: step1Content, validator:step1Validator }, { label: 'Step 2', subtitle: '50%', name: 'step 2', content: step2Content }, { label: 'Step 3', subtitle: '100%', name: 'step 3', content: step3Content, validator: step3Validator } ]} /> ) } |
As you can see we are importing the react-step-progress
library at the top and also we are importing the css
file of the library. And then we are rendering the StepProgressBar
widget and inside this we are passing the label
of the step and also we are passing the html
content of the steps and then we are passing the validator
to the step to check the validation
of the content.