TutorialOverlay

Render <TutorialOverlay /> once in your app so it can subscribe to the tutorial store and display the active step UI.

Usage

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

function App() {
  return (
    <div>
      <TutorialOverlay />
    </div>
  );
}

TutorialOverlay does not need props for the current public API. Configure behavior through tutorial.open({ steps, options }).

Because tutorial.open() returns a Promise, you can keep <TutorialOverlay /> mounted once and await tutorial completion from any handler or effect that triggers the open call. The Promise resolves with completed, skipped, closed, or replaced depending on how that run ended.

The highlight frame uses options.highLightPadding to expand around the target. If you do not provide it, the overlay uses an 8px padding by default.

Tutorial-level options still define the shared defaults for the overlay run. Use step.options when a single step needs different infoBoxHeight, infoBoxWidth, infoBoxMargin, highlightBorderColor, highlightBorderRadius, or partial labels.

The fallback order is step.options -> tutorial options -> built-in defaults. overlayColor remains global-only so the backdrop stays visually consistent across steps.

By default, the mounted overlay listens for Escape, ArrowLeft, and ArrowRight while it is open. You can disable that with options.keyboardNavigation = false.

Backdrop clicks are ignored by default. Set options.closeOnOverlayClick = true if you want clicking the dimmed overlay area to close the tutorial.

The info box automatically flips and clamps itself to stay visible when the highlighted target sits near the viewport edges.

For accessibility, the info box is rendered as a labeled dialog. Opening the tutorial moves focus into the dialog controls, and closing restores focus to the element that was active before tutorial.open(). The current overlay does not trap focus inside the dialog.