Docs
Components
Spotlight

The Spotlight

<Spotlight> highlights one target element with a beacon and contextual tooltip.

Usage

spotlight.tsx
import { Spotlight } from 'featuredrop/react'
 
<Spotlight
  featureId="csv-export-launch"
  targetSelector="#export-btn"
  placement="right"
  autoDismiss
  autoDismissDelay={4000}
/>

Key props

PropTypeNotes
featureIdstringRequired manifest id
targetSelector / targetRefselector or refTarget element
placement'top' | 'bottom' | 'left' | 'right'Tooltip position
autoDismissbooleanOptional auto close
tooltipContentReactNodeCustom tooltip body
⚠️

Use sparingly. Spotlight is intentionally interruptive.

Interactive Demo