@custom-react-hooks/use-step NPM

useStep Hook

useStep is a custom React hook designed for handling step-based logic in applications, such as wizards or multi-step forms. It manages the current step and provides navigation functionality.

Features

Step Navigation: Manages the current step and provides functions for navigating between steps.
Boundary Control: Ensures navigation stays within the defined steps, with an optional looping feature.
Customizable Step Controls: Offers functions for specific, next, previous, and reset step actions.
Looping Functionality: Optionally allows steps to loop back to the start or end.
SSR Safe: Can be used in server-side rendered applications.

Installation

Installing Only Current Hooks

npm install @custom-react-hooks/use-step

yarn add @custom-react-hooks/use-step

Installing All Hooks

npm install @custom-react-hooks/all

yarn add @custom-react-hooks/all

Importing the Hook

The useStep hook must be imported using a named import as shown below:

Named Import:

import { useStep } from '@custom-react-hooks/use-step';

This approach ensures that the hook integrates seamlessly into your project, maintaining consistency and predictability in how you use our package.

Usage

import React from 'react';
import { useStep } from '@custom-react-hooks/all';

const StepComponent = ({ totalSteps, initialStep, loop }) => {
  const { currentStep, nextStep, prevStep, reset } = useStep({ initialStep, totalSteps, loop });

  return (
    <div>
      <h2>Current Step: {currentStep}</h2>
      <div>
        <button onClick={prevStep}>Previous</button>
        <button onClick={nextStep}>Next</button>
      </div>
      <button onClick={reset}>
        Reset
      </button>
    </div>
  );
};

export default StepComponent;

API Reference

Parameters

initialStep: (optional) The starting step index.
totalSteps: The total number of steps.
loop: (optional) A boolean indicating if navigation should loop around.

Returns

currentStep: The index of the current step.
goToStep: Function to navigate to a specific step.
nextStep: Function to go to the next step.
prevStep: Function to go to the previous step.
reset: Function to reset to the initial step.

Use Cases

Wizard or Form Navigation: Navigate through multi-step forms or wizards, like checkout processes or surveys.
Step-by-Step Guides: Create step-by-step user guides or tutorials.
Progress Tracking: Track and display progress in a multi-step process.
Looping Slideshows or Carousels: Control the navigation of items in a looping carousel or slideshow.