React API reference

The React adapter (@glowhop/react-tour) exports components, hooks, and utility functions.

Functions

createGlowTour(options?)

Creates a tour controller instance. Inherited from Core.

Signature:

function createGlowTour(options?: GlowTourOptions): Tour

Components

DefaultTour

Pre-composed tour with overlay, popover, pointer, and all navigation buttons.

Props:

interface DefaultTourProps {
  tour: Tour
}

Usage:

<DefaultTour tour={tour} />

GlowTour.*

Composition primitives for custom layouts:

• GlowTour.Root - Root container (wraps the entire tour)
• GlowTour.Overlay - Backdrop overlay
• GlowTour.Pointer - Decorative indicator/arrow
• GlowTour.Popover - Dialog container
• GlowTour.Header - Title area
• GlowTour.Content - Description area
• GlowTour.Footer - Navigation button container
• GlowTour.AdvanceTrigger - Next step button
• GlowTour.BackTrigger - Previous step button
• GlowTour.CancelTrigger - Dismiss button

These components are also available as flat named exports: Root, Overlay, Pointer, Popover, Header, Content, Footer, AdvanceTrigger, BackTrigger, CancelTrigger.

Props (all components):

interface ComponentProps {
  tour?: Tour
  className?: string
  style?: React.CSSProperties
}

GlowTour.Pointer (detailed)

Customizes the directional content (emoji or custom content) of the pointer indicator.

Props:

interface PointerProps extends ComponentProps {
  as?: React.ElementType
  directionContent?: {
    top?: React.ReactNode
    bottom?: React.ReactNode
    left?: React.ReactNode
    right?: React.ReactNode
  }
}

Default glyphs (when directionContent is not set):

• top: 👆
• bottom: 👇
• left: 👈
• right: 👉

Usage (with custom content):

<GlowTour.Pointer
  directionContent={{
    top: "⬆️",
    bottom: "⬇️",
    left: "⬅️",
    right: "➡️"
  }}
/>

Usage (with custom element):

<GlowTour.Pointer
  directionContent={{
    bottom: <svg>...</svg>
  }}
/>

Usage (default pointers):

<GlowTour.Root tour={tour}>
  <GlowTour.Overlay />
  <GlowTour.Pointer />
  <GlowTour.Popover>
    <GlowTour.Header />
    <GlowTour.Content />
    <GlowTour.Footer>
      <GlowTour.CancelTrigger />
      <GlowTour.AdvanceTrigger />
    </GlowTour.Footer>
  </GlowTour.Popover>
</GlowTour.Root>

Hooks

useTour()

Returns reactive tour state. Must be called inside <GlowTour.Root tour={...}>.

Signature:

function useTour(): TourState<ReactTourContent>

Returns:

{
  name: string
  totalSteps: number
  currentStepIndex: number
  currentStep: TourCurrentStep<ReactTourContent> | null
  direction: "advance" | "previous"
  canAdvance: boolean
  canPrevious: boolean
  canCancel: boolean
  isFirstStep: boolean
  isLastStep: boolean
  status: "idle" | "starting" | "transitioning" | "active" | "finished" | "cancelled" | "error" | "disposed"
  error: Error | null
}

Usage:

const state = useTour();

return (
  <div>
    <p>Status: {state.status}</p>
    <button disabled={!state.canAdvance} onClick={() => tour.advance()}>
      Next
    </button>
  </div>
);

Types

• Tour - Tour controller
• TourState - Reactive tour state
• WorkflowDefinition - Immutable workflow
• StepPropsStore - Step state store
• ReactTourContent - React content type
• PointerDirectionContent - Content configuration for Pointer component directions
• GlowTourOptions - Options for createGlowTour
• StartOptions - Options for tour.create

Exports

export type { GlowTourOptions, StartOptions } from "@glowhop/core-tour";
export { DefaultTour, type DefaultTourProps } from "./components/default-tour";
export {
  AdvanceTrigger,
  BackTrigger,
  CancelTrigger,
  Content,
  Footer,
  GlowTour,
  Header,
  Overlay,
  Pointer,
  Popover,
  Root,
  useTour,
} from "./components/tour-components";
export type {
  ReactTourContent,
  StepPropsStore,
  Tour,
  TourState,
  WorkflowDefinition,
} from "./glow-tour";
export { createGlowTour } from "./glow-tour";