landolsi-web-banner

A lightweight, dismissible sticky banner component for React. Displays a promotional or informational message at the bottom of the page with an optional CTA link. Remembers dismissed state via localStorage.

Installation

npm install landolsi-web-banner

Usage

import { LandolsiWebBanner } from "landolsi-web-banner";

export default function App() {
  return (
    <>
      <LandolsiWebBanner source="my-site" />
      {/* rest of your app */}
    </>
  );
}

Props

| Prop | Type | Default | Description | | ------------- | ----------- | ------------------------------------ | ------------------------------------------------------- | | text | ReactNode | built-in message | Banner content. Overrides the default text. | | ctaText | string | "Voir les modèles →" | Label of the CTA button. | | linkHref | string | "https://landolsiweb.fr" | URL the CTA and inline links point to. | | source | string | — | Appended as utm_source query param on the link URL. | | storageKey | string | "landolsiweb-banner-dismissed" | localStorage key used to persist the dismissed state. | | dismissDays | number | 7 | Days before the banner reappears after being dismissed. |

Custom text

<LandolsiWebBanner
  text={<>Check out our new <strong>summer collection</strong>!</>}
  ctaText="Shop now →"
  linkHref="https://example.com/summer"
  source="homepage"
/>

Notes

• CSS is injected automatically — no stylesheet import needed.
• The banner slides in from the bottom and animates out on dismiss.
• Requires React ≥ 18.

License

MIT