formik-stepper/dist/stepper/Stepper.js

Get ready to take your form-building game to the next level with this revolutionary React component. With its seamless integration with the powerful Formik library, you'll be building forms faster and more efficiently than ever before. But that's not all

import React, { useEffect, useState } from "react";
import Step from "./Step";
import "./styles.css";
var Stepper = function (_a) {
    var step = _a.activeStep, steps = _a.steps;
    var _b = useState(step), activeStep = _b[0], setActiveStep = _b[1];
    useEffect(function () {
        setActiveStep(step);
    }, [step]);
    return (React.createElement("div", { className: "stepper-horizontal" }, React.Children.map(steps, function (child, index) {
        if (!React.isValidElement(child))
            return null;
        var _a = child.props, icon = _a.icon, label = _a.label;
        return (React.createElement(Step, { key: "step-".concat(index), label: label, active: activeStep === index, done: activeStep > index, isFirst: index === 0, isLast: index === React.Children.count(steps) - 1, icon: typeof icon === "function"
                ? icon({
                    active: activeStep === index,
                    done: activeStep > index,
                })
                : index + 1 }));
    })));
};
Stepper.displayName = "Stepper";
export default React.memo(Stepper, function (prevProps, nextProps) {
    return prevProps.activeStep === nextProps.activeStep;
});