Skip to content

zachleat/announcement-banner

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

announcement-banner

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:

  • Hyperlink to a thing.
  • Limited visual style (bring your own theme)
  • JavaScript not required.
  • Close preference saved to local storage for future page loads
  • Frameworkless: Web component
  • No CLS (cumulative layout shift):
    • Even when opted in to closed by default
    • Even when JavaScript fails
    • Even when JavaScript succeeds but runs after render
  • Use the 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).

Installation

  1. Install from npm: npm install @zachleat/announcement-banner --save
  2. Inline helper script into your <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");
}
  1. Add banner.css and banner.js to your build CSS and JS.
  2. Add the markup:
<announcement-banner>
  <a href="YOUR_URL">YOUR_TEXT</a>
  <button type="button" data-banner-close>Close</button>
</announcement-banner>

Changelog

  • v1.0.6 npm package name changed from herald-of-the-dog to @zachleat/announcement-banner