Stepper
The Stepper component provides a visual representation of a multi-step process.
Version 0.5.0
Installation
To install @igloo-ui/stepper
in your project, you will need to run the following command using npm:
npm install @igloo-ui/stepper
If you prefer Yarn, use the following command instead:
yarn add @igloo-ui/stepper
Usage
Then to use the component in your code just import it!
import Button from '@igloo-ui/button';
import Stepper from '@igloo-ui/stepper';
const [currentStep, setCurrentStep] = React.useState(0);
const exampleSteps = [
{ title: 'Step 1', onClick: (index) => setCurrentStep(index) },
{ title: 'Step 2', onClick: (index) => setCurrentStep(index) },
{ title: 'Step 3', onClick: (index) => setCurrentStep(index) },
];
<Stepper
currentStep={currentStep}
style={{ flex: '1 1 auto' }}
steps={exampleSteps}
/>
<Button
onClick={() => setCurrentStep((prevCurrentStep) => prevCurrentStep + 1)}
disabled={currentStep === exampleSteps.length - 1}
>
Continue
</Button>;
API
Step
Prop | Type | Default | Description |
---|---|---|---|
disabled | boolean | Whether or not the step is disabled | |
isComplete | boolean | - | Whether or not the step is complete |
isCurrent | boolean | - | Whether or not the step is the current step |
title | string | - | The title for the step |
Stepper
Prop | Type | Default | Description |
---|---|---|---|
className | string | - | The class name for the stepper |
clickableNextSteps | boolean | If true, the steps after the current step will be clickable and the user will be able to navigate to any step in the sequence | |
currentStep | number | The current step in the sequence | |
dataTest | string | - | Add a data-test tag for automated tests |
steps | Step[] | - | The steps in the sequence |