nextstepjs_react_guided_tour_provider_hook_quickstart.ts

1import React from 'react';
2import { NextStepProvider, useNextStep, NextStepStep } from '@agentaai/nextstepjs';
3
4// 1. Define your steps
5const steps: NextStepStep[] = [
6  {
7    icon: "👋",
8    title: "Welcome to the App!",
9    content: "This is a quick tour to get you started.",
10    selector: "#welcome-step", // Targets an element with this ID
11    side: "bottom",
12    showControls: true,
13    showSkip: true,
14  },
15  {
16    icon: "⚙️",
17    title: "Settings",
18    content: "Configure your preferences here.",
19    selector: "#settings-button",
20    side: "right",
21  }
22];
23
24// 2. Wrap your app with the Provider
25export default function App() {
26  return (
27    <NextStepProvider>
28      <MainComponent />
29    </NextStepProvider>
30  );
31}
32
33// 3. Use the hook to start the tour
34function MainComponent() {
35  const { startNextStep } = useNextStep();
36
37  return (
38    <div style={{ padding: '40px' }}>
39      <h1 id="welcome-step">Hello World</h1>
40      <button 
41        id="settings-button" 
42        style={{ marginTop: '20px' }}
43      >
44        Settings
45      </button>
46
47      <div style={{ marginTop: '20px' }}>
48        <button onClick={() => startNextStep('tour1', steps)}>
49          Start Guided Tour
50        </button>
51      </div>
52    </div>
53  );
54}