MCPcopy Create free account
hub / github.com/DavidHDev/react-bits / Stepper

Function Stepper

src/content/Components/Stepper/Stepper.jsx:6–123  ·  view source on GitHub ↗
({
  children,
  initialStep = 1,
  onStepChange = () => {},
  onFinalStepCompleted = () => {},
  stepCircleContainerClassName = '',
  stepContainerClassName = '',
  contentClassName = '',
  footerClassName = '',
  backButtonProps = {},
  nextButtonProps = {},
  backButtonText = 'Back',
  nextButtonText = 'Continue',
  disableStepIndicators = false,
  renderStepIndicator,
  ...rest
})

Source from the content-addressed store, hash-verified

4import './Stepper.css';
5
6export default function Stepper({
7 children,
8 initialStep = 1,
9 onStepChange = () => {},
10 onFinalStepCompleted = () => {},
11 stepCircleContainerClassName = '',
12 stepContainerClassName = '',
13 contentClassName = '',
14 footerClassName = '',
15 backButtonProps = {},
16 nextButtonProps = {},
17 backButtonText = 'Back',
18 nextButtonText = 'Continue',
19 disableStepIndicators = false,
20 renderStepIndicator,
21 ...rest
22}) {
23 const [currentStep, setCurrentStep] = useState(initialStep);
24 const [direction, setDirection] = useState(0);
25 const stepsArray = Children.toArray(children);
26 const totalSteps = stepsArray.length;
27 const isCompleted = currentStep > totalSteps;
28 const isLastStep = currentStep === totalSteps;
29
30 const updateStep = newStep => {
31 setCurrentStep(newStep);
32 if (newStep > totalSteps) {
33 onFinalStepCompleted();
34 } else {
35 onStepChange(newStep);
36 }
37 };
38
39 const handleBack = () => {
40 if (currentStep > 1) {
41 setDirection(-1);
42 updateStep(currentStep - 1);
43 }
44 };
45
46 const handleNext = () => {
47 if (!isLastStep) {
48 setDirection(1);
49 updateStep(currentStep + 1);
50 }
51 };
52
53 const handleComplete = () => {
54 setDirection(1);
55 updateStep(totalSteps + 1);
56 };
57
58 return (
59 <div className="outer-container" {...rest}>
60 <div className={`step-circle-container ${stepCircleContainerClassName}`} style={{ border: '1px solid #222' }}>
61 <div className={`step-indicator-row ${stepContainerClassName}`}>
62 {stepsArray.map((_, index) => {
63 const stepNumber = index + 1;

Callers

nothing calls this directly

Calls 1

updateStepFunction · 0.70

Tested by

no test coverage detected