Quick Start Guide

Install NextStep in your project using npm, yarn, or pnpm.
npm install nextstepjs motion
1. Wrap your app with the NextStepProvider and use the React Router adapter:

   //app/root.tsx
   import { NextStepProvider, NextStepReact } from 'nextstepjs';
   import { useReactRouterAdapter } from 'nextstepjs/adapters/react-router';
   import { Outlet } from 'react-router-dom';
   
   const steps = [
     {
       tour: "mainTour",
       steps: [
         {
           icon: "👋",
           title: "Welcome",
           content: "Let's get started with NextStep!",
           selector: "#step1",
           side: "right",
           showControls: true,
           showSkip: true
         },
         // More steps...
       ]
     }
   ];
   
   export default function App() {
     return (
       <NextStepProvider>
         <NextStepReact navigationAdapter={useReactRouterAdapter} steps={steps}>
           <Outlet />
         </NextStepReact>
       </NextStepProvider>
     );
   }

2. Vite Configuration

   ⚠️ Important: If you're using Vite with React Router, add the following configuration to your `vite.config.ts`:

   // vite.config.ts
   import { defineConfig } from 'vite';
   
   export default defineConfig({
     ssr: {
       noExternal: ['nextstepjs', 'motion']
     }
   });

3. Define your steps:

   import { Tour } from 'nextstepjs';
   
   const steps : Tour[] = [
     {
       tour: "mainTour",
       steps: [
         {
           title: "Welcome",
           content: "Let's get started with NextStep!",
           selector: "#step1",
           // ... other step properties
         },
         // ... more steps
       ]
     }
   ];

4. Add id attributes to your HTML elements to target them in your steps.
5. Use NextStep hook to control the tour from your components.

   import { useNextStep } from 'nextstepjs';
   
   const MyComponent = () => {
     const { startNextStep, closeNextStep, currentTour, currentStep, setCurrentStep, isNextStepVisible } = useNextStep();
   
     const handleStartTour = () => {
       startNextStep("mainTour");
     };
   
     return (
       <button onClick={handleStartTour}>Start Tour</button>
     );
   };