Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

bpk-component-banner-alert

Package Overview
Dependencies
Maintainers
5
Versions
544
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

bpk-component-banner-alert

Backpack banner alert component.

  • 5.0.25
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
584
increased by11.24%
Maintainers
5
Weekly downloads
 
Created
Source

bpk-component-banner-alert

Backpack banner alert component.

Installation

npm install bpk-component-banner-alert --save-dev

Usage

Default

import React from 'react';
import BpkBannerAlert, { ALERT_TYPES } from 'bpk-component-banner-alert';

export default () => (
  <BpkBannerAlert
    message="Successful alert with more information."
    type={ALERT_TYPES.SUCCESS}
  />
);

Dismissable

import React, { Component } from 'react';
import { ALERT_TYPES, BpkBannerAlertDismissable } from 'bpk-component-banner-alert';

class DismissableBpkBannerAlert extends Component {
  constructor() {
    super();


    this.state = {
      show: true,
    };
  }

  setDismissed = () => {
    this.setState({
      show: false,
    });
  }

  render() {
    return (
      <BpkBannerAlertDismissable
        message="Successful alert with dismiss option."
        type={ALERT_TYPES.SUCCESS}
        onDismiss={this.setDismissed}
        show={this.state.show}
        dismissButtonLabel="Dismiss"
      />
    );
  }
}

export default () => (
  <DismissableBpkBannerAlert />
);

withBannerAlertState(BpkBannerAlert)

import React, { Component } from 'react';
import { ALERT_TYPES, withBannerAlertState, BpkBannerAlertDismissable, BpkBannerAlertExpandable } from 'bpk-component-banner-alert';

const BannerAlertDismissableState = withBannerAlertState(BpkBannerAlertDismissable);
const BannerAlertExpandableState = withBannerAlertState(BpkBannerAlertExpandable);

<BannerAlertDismissableState
  dismissButtonLabel="Dismiss"
  message="Successful alert with dismiss option."
  type={ALERT_TYPES.SUCCESS}
/>

<BannerAlertDismissableState
  message="Successful alert that will disappear after 5 seconds."
  hideAfter={5}
  type={ALERT_TYPES.SUCCESS}
/>

<BannerAlertExpandableState
  message="Successful alert with expandable option."
  type={ALERT_TYPES.SUCCESS}
  toggleButtonLabel="View more"
>
  Lorem ipsum dolor sit amet.
</BannerAlertExpandableState>

Props

BpkBannerAlert

PropertyPropTypeRequiredDefault Value
typeALERT_TYPES (one of)true-
messagenodetrue-
animateOnEnterboolfalsefalse
animateOnLeaveboolfalsefalse
bannerClassNamestringfalsenull
iconBpkIconfalsenull
showboolfalsetrue

BpkBannerAlertDismissable

PropertyPropTypeRequiredDefault Value
typeALERT_TYPES (one of)true-
messagenodetrue-
animateOnEnterboolfalsefalse
animateOnLeaveboolfalsefalse
bannerClassNamestringfalsenull
dismissButtonLabelstringfalsenull
iconBpkIconfalsenull
onDismissfuncfalsenull
showboolfalsetrue

BpkBannerAlertExpandable

PropertyPropTypeRequiredDefault Value
typeALERT_TYPES (one of)true-
messagenodetrue-
animateOnEnterboolfalsefalse
animateOnLeaveboolfalsefalse
bannerClassNamestringfalsenull
expandedboolfalsefalse
iconBpkIconfalsenull
onExpandTogglefuncfalsenull
showboolfalsetrue
toggleButtonLabelstringfalsenull

withBannerAlertState(BpkBannerAlert)

PropertyPropTypeRequiredDefault Value
hideAfternumberfalsenull
onHidefuncfalsenull

Theme Props

  • bannerAlertPrimaryColor
  • bannerAlertSuccessColor
  • bannerAlertWarnColor
  • bannerAlertErrorColor

FAQs

Package last updated on 12 Nov 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc