Quick Start Guide

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

   import { NextStepProvider, NextStepReact } from 'nextstepjs';
   
   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...
       ]
     }
   ];
   
   function App() {
     return (
       <NextStepProvider>
         <NextStepReact steps={steps}>
           <YourAppContent />
         </NextStepReact>
       </NextStepProvider>
     );
   }

2. 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
       ]
     }
   ];

3. Add id attributes to your HTML elements to target them in your steps.
4. 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>
     );
   };