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>

    </>

  )
}