useBorda

The factory function that creates a tour manager. Call it once to get a reusable object with mount, unmount, and highlight methods — each mount creates an independent instance.

import { useBorda } from '@retoo/borda';

const borda = useBorda();

Returns

Returns a UseBordaReturns object with the following properties:

mount

Mounts a tour into a target element and returns a promise that resolves with a BordaInstance once the Svelte component is rendered and the event bus is ready. The only required config field is steps.

const instance = await borda.mount({
  steps: [
    {
      target: '#sidebar',
      title: 'Navigation',
      description: 'Browse sections here.',
      placement: ComponentPlacement.MIDDLE_END,
    },
  ],
});

The second argument specifies the mount target — any HTMLElement or ShadowRoot. When omitted, the widget mounts into document.body:

const container = document.getElementById('tour-root');

const instance = await borda.mount(
  { steps: [...] },
  container,
);

unmount

Destroys a previously mounted tour and removes it from the DOM:

await borda.unmount(instance);

After unmounting, all event handlers are cleared automatically.

highlight

Spotlights a single element without running a full tour:

const instance = await borda.highlight({
  target: '#important-button',
  title: 'Try this',
  description: 'This is the main action.',
  placement: ComponentPlacement.BOTTOM_CENTER,
});

Multiple instances

Each mount() call creates an independent tour. You can run several instances on the same page:

const borda = useBorda();

const tour1 = await borda.mount({ steps: [...] });
const tour2 = await borda.mount({ steps: [...] });

// Unmount individually
await borda.unmount(tour1);