React

GlowTour.js for React

Native React components and a Context-scoped tour instance, built for React 18 and 19. No portals to wire up yourself - DefaultTour renders the popover, overlay, and pointer for you.

Read the React guide Getting started

Install

npm i @glowhop/react-tour @glowhop/styles-tour

22.9 KiB gzipped in total: 0.3 KiB of adapter over the shared 21.2 KiB engine, plus 1.4 KiB of theme CSS you can replace with your own.

@glowhop/react-tour on npm · @glowhop/styles-tour on npm

Quick start

From examples/react in the GlowTour.js repository - copy, paste, run.

import { createRoot } from "react-dom/client";
import "@glowhop/styles-tour/default.css";
import { createGlowTour, DefaultTour } from "@glowhop/react-tour";

const tour = createGlowTour();
const workflow = tour
  .create("welcome")
  .step({ id: "welcome", target: "#welcome", title: "Welcome", content: "Hello world!" })
  .build();

const root = document.getElementById("root");
if (root) {
  createRoot(root).render(
    <>
      <div style={{ padding: "20px" }}>
        <h1>GlowTour.js - React Example</h1>
        <button
          id="welcome"
          type="button"
          onClick={() => void tour.run(workflow)}
          style={{ padding: "10px 20px", fontSize: "16px" }}
        >
          Start tour
        </button>
      </div>
      <DefaultTour tour={tour} />
    </>,
  );
}