Speak, Friend

Try the guide, then copy the code

Your app

Preview. The tour has not started.

Today

  • Book the venue
  • Send the agenda
  • Print name badges
Start from

TourGuide props Root.tsx

Dock side

Mirrors in right-to-left.

Theme

System follows the operating system.

Dim the page

Off by default. Left out for more contrast.

Announce

Move focus to the title, or use a live region.

Your stylesheet styles.css

Colours

Two custom properties set the accent and the action colour.

Your page index.html. Not a guide prop

Reading direction

The guide follows your page. There is nothing to set.

The code

import { TourGuide, TourProvider } from "speak-friend-react";
import "speak-friend-react/styles.css";
import { App } from "./App";
import { labels, store, tours } from "./tour";

export function Root() {
  return (
    <TourProvider tours={tours} store={store} context={null}>
      <App />
      <TourGuide
        labels={labels}
      />
    </TourProvider>
  );
}