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
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 |
BpkBannerAlertDismissable
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 |
BpkBannerAlertExpandable
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 |
withBannerAlertState(BpkBannerAlert)
Property |
PropType |
Required |
Default Value |
hideAfter |
number |
false |
null |
onHide |
func |
false |
null |
Theme Props
bannerAlertPrimaryColor
bannerAlertSuccessColor
bannerAlertWarnColor
bannerAlertErrorColor