@lekko/react-banner

This is a dynamically configurable banner component/provider for your website powered by Lekko.

The provider wraps the Lekko React SDK config provider under the hood, but you can use it alongside an existing provider in your app.

Setup

NextJS

The simplest way to get started with using this component in NextJS is to use the convenience initialization script which is available with this package.

npx lekko-banner-init-next

This will do a few things:

1. Generate some example functions that configure the banner's contents (in lekko/plugins.ts)
2. Create a client component wrapper that you can drop into your root layout (in components/banner.tsx)
3. Import some default styles and the wrapper component in the root layout

Usage

Config types

export interface BannerConfig {
  /**
   * Main banner message
   */
  text?: string
  /**
   * If present, a call to action link will be rendered after the message.
   */
  cta?: {
    text?: string
    url?: string
    /**
     * Whether to open the link in a new tab
     */
    external?: boolean
  }
  /**
   * If set to true, the close button will not be rendered.
   */
  permanent?: boolean
}

export interface BannerStyleConfig {
  /**
   * Targets the root <div> element.
   */
  className?: string
  /**
   * Targets the banner's text, rendered in a <p> element.
   */
  textClassName?: string
  /**
   * Targets the banner's CTA link, rendered in a <a> element.
   */
  ctaClassName?: string
  /**
   * Targets the banner's close button, rendered in a <button> element.
   */
  closeClassName?: string
}