Custom From Stepper Component in Css and React Js

• A Complete Example for From Stepper in React Js.

    // FormStepper.js

    import React, { useState } from 'react';

    import './FormStepper.css'; // Ensure this is correctly linked

    const FormStepper = () => {

        const [currentStep, setCurrentStep] = useState(1);

        const totalSteps = 10; // Define the total number of steps

        const nextStep = () => {

            if (currentStep < totalSteps) {

                setCurrentStep(currentStep + 1);

            }

        };

        const prevStep = () => {

            if (currentStep > 1) {

                setCurrentStep(currentStep - 1);

            }

        };

        const renderStepContent = (step) => {

            // Your switch case for content rendering

        };

        // Function to render step indicators

        const renderStepIndicators = () => {

            return Array.from({ length: totalSteps }, (_, index) => (

                <div key={index} className={`step-indicator ${currentStep === index + 1 ? 'active' : ''}`}>

                    {index + 1}

                </div>

            ));

        };

        return (

            <div className="form-stepper">

                <div className="steps-header">

                    {renderStepIndicators()}

                    <hr className="stepper-line" /> {/* Horizontal line */}

                </div>

                <div className="step-content">{renderStepContent(currentStep)}</div>

                <div className="stepper-controls">

                    {currentStep > 1 && <button onClick={prevStep}>Back</button>}

                    {currentStep < totalSteps && <button onClick={nextStep}>Next</button>}

                    {currentStep === totalSteps && <button onClick={() => alert('Form submitted!')}>Submit</button>}

                </div>

            </div>

        );

    };

    export default FormStepper;

    /* FormStepper.css */

    .form-stepper {

        display: flex;

        flex-direction: column;

        align-items: center;

        padding: 20px;

    }

    .steps-header {

        position: relative;

        display: flex;

        justify-content: space-between;

        width: 100%;

        margin-bottom: 20px;

    }

    .step-indicator {

        width: 30px;

        height: 30px;

        line-height: 30px;

        border-radius: 50%;

        background-color: #e0e0e0;

        color: #000;

        text-align: center;

    }

    .step-indicator.active {

        background-color: #4caf50;

        color: #fff;

    }

    .stepper-line {

        position: absolute;

        width: 100%;

        top: 6px;

        /* Adjust this based on the size of your step indicators */

        border: 0;

        height: 2px;

        background-color: #e0e0e0;

        z-index: -1;

    }

    .step-content {

        margin-bottom: 20px;

    }

    .stepper-controls button {

        margin: 5px;

        padding: 10px 15px;

        font-size: 16px;

        cursor: pointer;

    }

  // App.js

  import React from 'react'

  import FormStepper from './FormStepper'

  const App = () => {

    return (<>

      <FormStepper />

    </>)

  }

  export default App