monday-ui-react-core/src/hooks/useWizard/__stories__/useWizard.mdx

Official monday.com UI resources for application development in React.js

import { Meta } from "@storybook/blocks";
import { FunctionArgument, FunctionArguments } from "vibe-storybook-components";
import * as UseWizardStories from "./useWizard.stories";

<Meta of={UseWizardStories} />

# useWizard

- [Overview](#overview)
- [Variants](#variants)
- [Arguments](#arguments)
- [Returns](#returns)
- [Feedback](#feedback)

## Overview

A custom hook for managing multi-step wizards. It provides state and functions to navigate between steps, along with directionality information.

<Canvas of={UseWizardStories.Overview} />

## Variants

### With Initial Step

Start the wizard from a custom initial step using the `initialStep` parameter.

<Canvas of={UseWizardStories.WithInitialStep} />

### With Steps component

<Canvas of={UseWizardStories.WithStepsComponent} />

## Arguments

<FunctionArguments>
  <FunctionArgument name="options" type="Object">
    <FunctionArgument name="initialStep" type="number" description="The starting step of the wizard. Defaults to 0." />
    <FunctionArgument name="stepCount" type="number" description="Total number of steps in the wizard." />
    <FunctionArgument
      name="onStepChange"
      type="(newStep: number, oldStep: number) => void"
      description="Callback invoked when the active step changes."
    />
    <FunctionArgument name="onFinish" type="() => void" description="Callback invoked when the wizard completes." />
  </FunctionArgument>
</FunctionArguments>

## Returns

<FunctionArguments>
  <FunctionArgument name="result" type="Object">
    <FunctionArgument name="activeStep" type="number" description="The current active step." />
    <FunctionArgument
      name="direction"
      type='"forward" | "backward"'
      description="The direction of the last step change."
    />
    <FunctionArgument name="next" type="() => void" description="Function to proceed to the next step." />
    <FunctionArgument name="back" type="() => void" description="Function to go back to the previous step." />
    <FunctionArgument
      name="goToStep"
      type="(newStep: number) => void"
      description="Function to navigate to a specific step."
    />
    <FunctionArgument
      name="isFirstStep"
      type="boolean"
      description="Indicates if the current step is the first step."
    />
    <FunctionArgument name="isLastStep" type="boolean" description="Indicates if the current step is the last step." />
  </FunctionArgument>
</FunctionArguments>