useStep

Custom hook that manages and navigates between steps in a multi-step process.

Installation

npx sse-hooks add use-step

yarn dlx sse-hooks add use-step

pnpm dlx sse-hooks add use-step

deno run -A npm:sse-hooks add use-step

bunx sse-hooks add use-step

Usage

example.ts

import { useStep } from "./{hooks file}";

const [
  currentStep,
  {
    goToNextStep,
    goToPrevStep,
    reset,
    canGoToNextStep,
    canGoToPrevStep,
    setStep,
  },
] = useStep(3);
// Access and use the current step and provided helper functions.

API

Parameters

Prop	Default	Type
`maxStep`	-	`number` The maximum step in the process.

Returns

Return Value	Default	Type
`[0]`	-	`number`
`[1]`	-	`UseStepActions`

Types Aliases

No specific type aliases defined for this component.

Changelog

c165d — feat: enhance useRoleGuard and useSSR hooks with additional options and documentation

30da4 — feat: add new hooks and their metadata

cf13e — feat: add custom hooks for step navigation, ternary dark mode, timeout, toggle, unmount, and window size

useRoleGuard

Custom hook for Role-Based Access Control (RBAC). Checks if a user has specific permissions and handles redirection for unauthorized access.

useToggle

Custom hook that manages a boolean toggle state in React components.