0.2.0

The BordaInstance is returned by borda.mount() and borda.highlight(). It provides runtime access to every feature API and the reactive config store.

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

Properties

PropertyTypeDescription
apiBordaApiTour controller, components, and event bus
configUseBordaConfigReturnsReactive config store
responsiveBordaResponsiveApiActive breakpoint info
scrollBordaScrollApiScroll-to-target API
animationBordaAnimationApiResolved animation settings
skipBordaSkipApi"Don't show again" state
visibilityBordaVisibilityApiShow/hide API

api

The top-level API surface:

PropertyTypeDescription
api.controllerBordaControllerApiTour navigation — currentStep, next, prev, changeStep, finish
api.componentsBordaComponentsReferences to all child component instances
api.eventsBordaEventEmitterPub/sub event bus for tour events

config

The reactive config store:

// Read current config
const config = instance.config.current;

// Get a snapshot
const snapshot = instance.config.getConfig();

// Replace entirely
instance.config.setConfig({ steps: [...] });

// Deep merge
instance.config.mergeConfig({ tourButtons: { skip: false } });

Quick reference

// Tour navigation
instance.api.controller.next();
instance.api.controller.prev();
instance.api.controller.changeStep(2);
instance.api.controller.finish();

// Visibility
instance.visibility.show();
instance.visibility.hide();

// Scroll
await instance.scroll.scrollTo(document.getElementById('target'));

// Skip
instance.skip.set(true);
instance.skip.clear();

// Events
instance.api.events.on(BordaEvent.ON_TOUR_FINISH, () => { ... });

// Config
instance.config.mergeConfig({ size: ComponentSize.LG });