Solid

GlowTour.js for Solid

Solid 1.8+ components with a Context-scoped tour instance, verified for real server rendering and hydration in a SolidStart app.

Read the Solid guide Getting started

Install

npm i @glowhop/solid-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/solid-tour on npm · @glowhop/styles-tour on npm

Quick start

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

import { render } from "solid-js/web";
import "@glowhop/styles-tour/default.css";
import { createGlowTour, DefaultTour } from "@glowhop/solid-tour";

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

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