@zachleat/announcement-banner
Advanced tools
A reusable announcement bar banner component. If you don’t need a Hide or Close button on the banner (and to save the user preference), you don’t need this (just use CSS)!
Features:
key attribute (v1.0.5+) (or backwards compatible with data-banner-key 1.0.3+) to set your own storage key for comparison (defaults to the first link URL).npm install @zachleat/announcement-banner --save<head>// Inline this into your <head>
// The current banner CTA URL
let latestBannerUrl = "YOUR_URL";
let savedKey = localStorage.getItem("banner--cta-url");
// Hide if the banner URL is the same as the saved preference banner URL
if(savedKey === latestBannerUrl) {
document.documentElement.classList.add("banner--hide");
}
banner.css and banner.js to your build CSS and JS.<announcement-banner>
<a href="YOUR_URL">YOUR_TEXT</a>
<button type="button" data-banner-close>Close</button>
</announcement-banner>
v1.0.6 npm package name changed from herald-of-the-dog to @zachleat/announcement-bannerFAQs
Security News
GPT-6 Astra hits 100% on ExploitBench and finds zero-days autonomously, while independent tests reveal scope violations and monitoring gaps.
Product
Socket can now send alerts and supply chain attack notifications to Microsoft Teams, with filters that route the right updates to each channel.
Security News
pnpm 12 rewrites the package manager in Rust, cutting install times by up to 90% while preserving pnpm 11 workflows and lockfiles.