useNextStep Hook for Next.js

Basic Usage

Import the useNextStep hook from nextstepjs and use it to control your tours programmatically:

import { useNextStep } from 'nextstepjs';

function YourComponent() {
  const { startNextStep, closeNextStep } = useNextStep();
  
  const handleStartTour = () => {
    startNextStep('tourName');
  };
  
  const handleCloseTour = () => {
    closeNextStep();
  };
  
  return (
    <div>
      <button onClick={handleStartTour}>Start Tour</button>
      <button onClick={handleCloseTour}>Close Tour</button>
    </div>
  );
}

Available Methods and Properties

The useNextStep hook provides the following methods and properties:

// Start a specific tour
startNextStep('tourName');

// Start the first tour in the steps array
startNextStep();

// Close the active tour
closeNextStep();

// Check the current tour
if (currentTour === 'featureTour') {
  // Do something specific for this tour
}

// Get the current step index
console.log(`Current step: ${currentStep + 1} of ${totalSteps}`);

// Jump to step index 2
setCurrentStep(2);

// Jump to step index 3 with a 500ms delay
setCurrentStep(3, 500);

// Conditionally render UI based on tour visibility
{isNextStepVisible && (
  <div className="tour-active-indicator">Tour in progress</div>
)}

Practical Example

Here's a practical example of using the useNextStep hook to create a help button that starts a tour:

'use client';

import { useNextStep } from 'nextstepjs';
import { Button } from '@/components/ui/button';
import { HelpCircle } from 'lucide-react';

export function HelpButton() {
  const { startNextStep } = useNextStep();
  
  return (
    <Button
      variant="outline"
      size="icon"
      onClick={() => startNextStep('helpTour')}
      aria-label="Help"
    >
      <HelpCircle className="h-4 w-4" />
    </Button>
  );
}

Conditional Tour Start

You can use the useNextStep hook with React's useEffect to start a tour when certain conditions are met:

'use client';

import { useEffect } from 'react';
import { useNextStep } from 'nextstepjs';

export function OnboardingWrapper({ children, isNewUser }) {
  const { startNextStep } = useNextStep();
  
  useEffect(() => {
    // Start the onboarding tour for new users
    if (isNewUser) {
      startNextStep('onboardingTour');
    }
  }, [isNewUser, startNextStep]);
  
  return <>{children}</>;
}

Complete Hook Example

Here's a complete example showing how to use all the properties and methods of the useNextStep hook:

'use client';
import { useNextStep } from 'nextstepjs';

export default function TourController() {
  const { 
    startNextStep, 
    closeNextStep, 
    currentTour, 
    currentStep, 
    setCurrentStep, 
    isNextStepVisible 
  } = useNextStep();

  const handleStartTour = () => {
    startNextStep('welcomeTour');
  };

  const handleSkipTour = () => {
    closeNextStep();
  };

  const handleJumpToStep = () => {
    setCurrentStep(2);
  };

  return (
    <div className="tour-controls">
      <button onClick={handleStartTour}>Start Tour</button>
      
      {isNextStepVisible && (
        <>
          <button onClick={handleSkipTour}>Skip Tour</button>
          <button onClick={handleJumpToStep}>Jump to Step 3</button>
          <div className="tour-status">
            <p>Current tour: {currentTour}</p>
            <p>Current step: {currentStep + 1}</p>
          </div>
        </>
      )}
    </div>
  );
}

You have successfully learned about the useNextStep hook and how to control tours programmatically in your Next.js application.