import { Meta } from "@storybook/blocks";

<Meta title="Hooks/use-step" />

# use-step hook

Manage a multiple step sequence

## Purpose

The use-step hook provides a way to track a multiple step sequence. The hook
needs to know how many total steps are in the sequence and then it will keep
track of which step is current and provide methods for navigating between each
step. The UI is up to you.

## Usage

To see an example within a modal, look at the [modal story](/?path=/docs/components-modal--default#set-up-wizard-example).

```jsx
export const Component = () => {
  const { step, goToNextStep, goToPreviousStep, goToStep } = useStep({
    steps: 4,
    initialStep: 2,
  });

  return (
    <Box>
      <Box className="p-8">
        {step === 1 && <>Step 1</>}
        {step === 2 && <>Step 2</>}
        {step === 3 && <>Step 3</>}
        {step === 4 && <>Step 4</>}
      </Panel>

      <Button.Group className="mt-4 justify-end">
        {step !== 1 && (
          <Button.Group className="mr-auto">
            <Button
              variant={BUTTON_VARIANT.SECONDARY}
              onClick={goToPreviousStep}
            >
              Previous Step
            </Button>
          </Button.Group>
        )}

        <Button
          variant={BUTTON_VARIANT.SECONDARY}
          onClick={() => {
            goToStep(1);
          }}
        >
          Cancel
        </Button>

        {step === 4 ? (
          <Button
            onClick={() => {
              console.log("Create button clicked");
            }}
          >
            Create
          </Button>
        ) : (
          <Button onClick={goToNextStep}>Next Step</Button>
        )}
      </Button.Group>
    </Box>
  );
};
```

## Return values

- `step`: the current step, a `number`
- `goToNextStep`: function to advance to the next step, `step + 1`
- `goToPreviousStep`: function to advance to the previous step, `step - 1`
- `goToStep`: function to advance to a specific step; accepts the argument `newStep`, a `number`
- `currentStepIndex`: the index value of the current step, `step - 1`
- `nextStepIndex`: the index value of the next step, `currentStepIndex + 1`
- `previousStepIndex`: the index value of the previous step, `currentStepIndex - 1`
- `isFirstStep`: boolean to determine if the current step is the first step in the sequence
- `isLastStep`: boolean to determine if the current step is the last step in the sequence

## API

### steps

Total number of steps

Required: No<br />
Default value: `1`<br />
Type: `number`

### initialStep

The step on which to begin; should not exceed `steps`

Required: No<br />
Default value: `1`<br />
Type: `number`