The Spotlight Chain
<SpotlightChain> sequences multiple targeted hints across your UI.
It is useful for guided discovery without a full tour dialog.
Usage
onboarding-chain.tsx
import { SpotlightChain } from 'featuredrop/react'
const steps = [
{
id: 'targeting',
target: '#segment-target',
title: 'Audience targeting',
content: 'Define rollout segments before launch.'
},
{
id: 'measure',
target: '#segment-measure',
title: 'Measure impact',
content: 'Track interaction rates after launch.'
}
]
<SpotlightChain steps={steps} startOnMount />Key props
| Prop | Type | Notes |
|---|---|---|
steps | SpotlightChainStep[] | Required sequence |
startOnMount | boolean | Start automatically |
autoAdvance | boolean | Step progression timer |
autoAdvanceMs | number | Default auto-advance delay |
onStepViewed | (step, index) => void | Analytics hook |
onComplete | () => void | Completion callback |
Steps with missing targets are skipped automatically with a console warning.