@tour-kit/announcementsHeadless
HeadlessToast
HeadlessAnnouncementToast: unstyled notification primitive with auto-dismiss timer and position data via render props
HeadlessToast
Unstyled toast notification that provides state and behavior through render props.
Additional Render Props
Prop
Type
Example
import { HeadlessToast } from '@tour-kit/announcements/headless';
<HeadlessToast
id="tip"
render={({ isVisible, config, position, intent, progress, remainingTime }) => {
if (!isVisible) return null;
return (
<div
className={`toast ${position} ${intent}`}
role="status"
aria-live="polite"
>
<p>{config.title}</p>
{config.toastOptions?.showProgress && (
<div className="progress-bar">
<div className="progress" style={{ width: `${progress}%` }} />
</div>
)}
<span className="time">{Math.ceil(remainingTime / 1000)}s</span>
</div>
);
}}
/>