intro.js-react

import React, { useState } from 'react'; import { Steps } from 'intro.js-react'; import 'intro.js/introjs.css'; // Don't forget to import Intro.js CSS // Simulate some elements for the tour const MyComponent = () => { const [stepsEnabled, setStepsEnabled] = useState(true); const [initialStep, setInitialStep] = useState(0); const steps = [ { element: '.step-one-selector', // Make sure this selector exists in your DOM intro: 'This is the first step of our tour!', position: 'right', }, { element: '.step-two-selector', intro: 'And here is the second important element.', }, { element: '.step-three-selector', intro: 'Finally, this is the last piece of information.', position: 'bottom', }, ]; const onExit = () => { setStepsEnabled(false); setInitialStep(0); // Reset for next time }; return ( <div> <h1 className="step-one-selector">Welcome to My App</h1> <p className="step-two-selector">This is some content.</p> <button className="step-three-selector" onClick={() => setStepsEnabled(true)}> Start Tour </button> <Steps enabled={stepsEnabled} steps={steps} initialStep={initialStep} onExit={onExit} // You can also pass Intro.js options directly options={{ showButtons: true, showStepNumbers: false, exitOnOverlayClick: false, }} /> </div> ); }; export default MyComponent;