useHighlight
Spotlight a single element without running a full tour.
The useBordaHighlight hook provides the highlight() shortcut — spotlights a single element by mounting a one-step tour through the factory.
import { useBordaHighlight } from '@retoo/borda';
In most cases, you don't need this hook directly — use borda.highlight() instead, which calls it internally.
Usage
import { useBorda, useBordaHighlight, ComponentPlacement } from '@retoo/borda';
import '@retoo/borda/styles';
const borda = useBorda();
// Equivalent to borda.highlight(...)
const instance = await borda.highlight({
target: '#important-button',
title: 'Try this',
description: 'This is the main action.',
placement: ComponentPlacement.BOTTOM_CENTER,
});
Parameters
| Parameter | Type | Description |
|---|---|---|
step | BordaStepConfig | Step definition (target, title, description, placement, etc.) |
config | BordaHighlightConfig | Optional top-level config (same as BordaConfig without steps) |
target | BordaTarget | Optional mount target — HTMLElement or ShadowRoot |
Returns
Returns a Promise<BordaInstance> — the same instance object as mount().
Interface
interface UseBordaHighlightReturns {
highlight: (
step: BordaStepConfig,
config?: BordaHighlightConfig,
target?: BordaTarget
) => Promise<BordaInstance>;
}