@berlitz/alert-banner

AlertBanner component for the Max Design System

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@berlitz/alert-banner
5.1.112 years ago4 years agoMinified + gzip package size for @berlitz/alert-banner in KB

Readme

Alert Banner npm version
Display a banner fixed at the bottom of the page, containing content and a button.

Installation

yarn add @berlitz/alert-banner

Props

| Argument | Type | Required | Default | Example | | ----------------- | ------ | -------- | ------- | ------------------------------------------------------------- | | content | string | true | null | I have read and agree to the <a href='#'>Privacy Policy</a> | | buttonText | string | true | null | I Agree | | handleButtonClick | func | true | null | () => setBannerDismissed(true) |

Usage

import React, { setState } from 'react'
import ComponentName from '@berlitz/alert-banner'

const MyApp = () => {
  const [bannerDismissed, setBannerDismissed] = setState(false)

  return (
    <>
      {!bannerDismissed && (
        <AlertBanner
          content="I have read and agree to the <a href='#'>Privacy Policy</a>"
          buttonText="I Agree"
          onClick={() => setBannerDismissed(true)}
        />
      )}
    </>
  )
}

When to use this component

  • Privacy policy banner
  • Displaying a persistent, message to the user