@tour-kit/announcementsHeadless
HeadlessSpotlight
HeadlessAnnouncementSpotlight: unstyled highlight primitive with target element positioning and overlay via render props
HeadlessSpotlight
Unstyled element spotlight that provides state and behavior through render props.
Additional Render Props
Prop
Type
Example
import { HeadlessSpotlight } from '@tour-kit/announcements/headless';
<HeadlessSpotlight
id="new-button"
render={({
isVisible,
config,
hide,
targetElement,
targetRect,
overlayStyle,
spotlightStyle,
}) => {
if (!isVisible || !targetElement || !targetRect) return null;
return (
<>
{/* Overlay with cutout */}
<div className="overlay" style={overlayStyle} onClick={hide} />
{/* Spotlight highlight */}
<div className="spotlight" style={spotlightStyle} />
{/* Announcement card */}
<div className="announcement-card">
<h3>{config.title}</h3>
<p>{config.description}</p>
<button onClick={hide}>Got it</button>
</div>
</>
);
}}
/>