Bpk-component-banner-alert NPM

bpk-component-banner-alert

Backpack banner alert component.

Installation

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

Usage

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}
  />
);

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 />
);

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

Property	PropType	Required	Default Value
type	ALERT_TYPES (one of)	true	-
message	node	true	-
animateOnEnter	bool	false	false
animateOnLeave	bool	false	false
bannerClassName	string	false	null
icon	BpkIcon	false	null
show	bool	false	true

Property	PropType	Required	Default Value
type	ALERT_TYPES (one of)	true	-
message	node	true	-
animateOnEnter	bool	false	false
animateOnLeave	bool	false	false
bannerClassName	string	false	null
dismissButtonLabel	string	false	null
icon	BpkIcon	false	null
onDismiss	func	false	null
show	bool	false	true

Property	PropType	Required	Default Value
type	ALERT_TYPES (one of)	true	-
message	node	true	-
animateOnEnter	bool	false	false
animateOnLeave	bool	false	false
bannerClassName	string	false	null
expanded	bool	false	false
icon	BpkIcon	false	null
onExpandToggle	func	false	null
show	bool	false	true
toggleButtonLabel	string	false	null

Property	PropType	Required	Default Value
hideAfter	number	false	null
onHide	func	false	null

Theme Props

bannerAlertPrimaryColor
bannerAlertSuccessColor
bannerAlertWarnColor
bannerAlertErrorColor

bpk-component-banner-alert

Installation

Usage

Default

Dismissable

withBannerAlertState(BpkBannerAlert)

Props

BpkBannerAlert

BpkBannerAlertDismissable

BpkBannerAlertExpandable

withBannerAlertState(BpkBannerAlert)

Theme Props