React.js react-step-progress Example to Integrate Multi-Step Progressbar With Validation in Browser Using Javascript

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

// 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
    }
  ]}
/>
 )
}

// 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%',

content: step1Content,

validator:step1Validator

{

label: 'Step 2',

subtitle: '50%',

content: step2Content

{

label: 'Step 3',

subtitle: '100%',

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.