Implement Stepper in React Js

Steppers demonstrate progress by taking a series of numbered, consecutive steps.

They could be utilized for navigation as well.

Steppers may show a brief feedback message following the saving of a step.

First, we should install stepper in our application

npm i react-form-stepper

Import this package into our application

import { Stepper } from 'react-form-stepper';

Below you can see how to use stepper in our application

import React, { useState } from 'react'
import { Stepper } from 'react-form-stepper';

export default function EmojiCom() {
  let startPoint = 0
  let endPoint = 2
  const [counter, setcounter] = useState(startPoint)
  return (
    <>
      <Stepper
        steps={[{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }]}
        activeStep={counter}
      />
      <div className='button-wrapper'>
        <button onClick={() => { setcounter(counter > startPoint ? counter - 1 : counter) }}>Previous</button>
        <button onClick={() => { setcounter(counter < endPoint ? counter + 1 : counter) }}>Next</button>
      </div>

    </>

  )
}
activeStep
It defines the currently active step
connectorStateColors
here you can give connector state colors in boolean type
nonLinear
you can use this param in linear steps in boolean type
You can see below the output

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories