0.2.0

Tour

Lifecycle events for tour start, finish, close, navigation, and step changes.

Tour events fire during the tour lifecycle — when it starts, finishes, closes, and when the user navigates between steps. All events are accessible through instance.api.events.

Events

EventString valueWhen
ON_TOUR_STARTtour:startTour initialises on mount
ON_TOUR_FINISHtour:finishLast step is completed
ON_TOUR_CLOSEtour:closeTour is dismissed before completion
ON_TOUR_NEXTtour:nextUser advances to the next step (not on last step)
ON_TOUR_PREVtour:prevUser navigates to the previous step
ON_TOUR_STEP_CHANGEtour:step-changeActive step changes (any navigation)

Usage

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

instance.api.events.on(BordaEvent.ON_TOUR_START, () => {
  analytics.track('tour_started');
});

instance.api.events.on(BordaEvent.ON_TOUR_NEXT, () => {
  analytics.track('tour_step_next', { step: instance.api.controller.currentStep });
});

instance.api.events.on(BordaEvent.ON_TOUR_FINISH, () => {
  analytics.track('tour_completed');
});

instance.api.events.on(BordaEvent.ON_TOUR_CLOSE, () => {
  analytics.track('tour_dismissed');
});

instance.api.events.on(BordaEvent.ON_TOUR_STEP_CHANGE, () => {
  console.log('Now on step', instance.api.controller.currentStep);
});

Unsubscribing

Pass the same handler reference to off():

const handler = () => console.log('finished');

instance.api.events.on(BordaEvent.ON_TOUR_FINISH, handler);

// Later
instance.api.events.off(BordaEvent.ON_TOUR_FINISH, handler);

Notes

  • ON_TOUR_START fires once after the first step is rendered.
  • ON_TOUR_FINISH fires before the unmount animation begins.
  • ON_TOUR_CLOSE fires when the user dismisses the tour via the close button, backdrop click, or Escape key.
  • ON_TOUR_STEP_CHANGE fires on every navigation — including next, prev, changeStep, and finish.
  • ON_TOUR_NEXT / ON_TOUR_PREV also fire on tooltip swipe gestures on touch devices.

Scroll API

Programmatically scroll the page to bring elements into view.

Widget

Handle widget destruction with ON_BORDA_DESTROY and interactions with ON_CLOSE_CLICK and ON_OVERLAY_CLICK.