index.mdx

import Layout from '@/components/docs-layout';

export default function MDXPage({ children }) { return {children}; }

GETTING STARTED

install with npm

npm install react-tutorial-overlay

install with yarn

yarn add react-tutorial-overlay

Basic usage

import { TutorialOverlay, tutorial } from 'react-tutorial-overlay';

const App = () => {
  const handleClick = async () => {
    const result = await tutorial.open({
      steps: [
        {
          targetIds: ['target-id'],
          title: 'Welcome',
          content: 'This content is rendered as plain text.',
        },
      ],
      options: {
        onClose: () => {
          console.log('tutorial closed');
        },
      },
    });

    if (result.reason === 'completed') {
      console.log('move to the next onboarding task');
    }
  };

  return (
    <div>
      <button id="target-id" onClick={handleClick}>
        open
      </button>
      <TutorialOverlay />
    </div>
  );
};

Mount <TutorialOverlay /> once in your app. Then call tutorial.open({ steps, options }) from any button handler or effect.

tutorial.open() resolves with { reason: 'completed' | 'skipped' | 'closed' } so you can await the end of the tutorial.

content accepts a string. HTML inside that string is shown as text rather than injected into the page.