step-guide-react
Version:
<div class="align" ><h1>React Tour-Guide</h1></div>
31 lines (30 loc) • 1.13 kB
TypeScript
import { FC } from "react";
import "./ButtonGroup.css";
interface ButtonGroupProps {
/** Callback function triggered when the "Next" button is clicked */
onNext: () => void;
/** Callback function triggered when the "Previous" button is clicked */
onPrevious: () => void;
/** The current active step in the step indicator */
currentStep: number;
/** The total number of steps */
totalSteps: number;
/** Flag to disable the "Next" button */
isNextDisabled: boolean;
/** Flag to disable the "Previous" button */
isPreviousDisabled: boolean;
/** Callback function triggered when a step dot is clicked */
onDotClick: (step: number) => void;
}
/**
* ButtonGroup Component
*
* This component provides a navigation control for a multi-step process.
* It includes "Next" and "Previous" buttons, along with step indicators
* displayed as dots.
*
* @param {ButtonGroupProps} props - The properties passed to the ButtonGroup component.
* @returns {JSX.Element} The rendered ButtonGroup component.
*/
declare const ButtonGroup: FC<ButtonGroupProps>;
export default ButtonGroup;