@tour-kit/announcementsHeadless
HeadlessModal
HeadlessAnnouncementModal: unstyled dialog primitive with focus trap, backdrop click, and Escape key dismiss handling
domidex01Published
Unstyled modal component that provides state and behavior through render props.
Render Props
Prop
Type
Example
import { HeadlessModal } from '@tour-kit/announcements/headless';
<HeadlessModal
id="welcome"
render={({ isVisible, config, hide, dismiss, titleId, descriptionId }) => {
if (!isVisible) return null;
return (
<div className="modal-container">
<div className="overlay" onClick={hide} />
<div
role="dialog"
aria-modal="true"
aria-labelledby={titleId}
aria-describedby={descriptionId}
className="modal-content"
>
<h2 id={titleId}>{config.title}</h2>
<p id={descriptionId}>{config.description}</p>
<button onClick={hide}>Close</button>
<button onClick={() => dismiss()}>Don't Show Again</button>
</div>
</div>
);
}}
/>