material-ui-banner

material-ui-banner

Bringing the Material Design banner component to the material-ui library. Spec here: https://material.io/design/components/banners.html

Installation

npm install material-ui-banner --save

Usage

Imports:

import { Banner, StaticBanner } from 'material-ui-banner';

To embed a banner anywhere on the page

<Banner
  icon={<div />}
  label="Text goes here"
  open
/>

To add a static banner to the top of the page

<AppBar>
  <Toolbar />
</AppBar>

<StaticBanner />

You would then open the banner elsewhere in the app like so:

StaticBanner.show({
  icon: <div />,
  label: 'This is an example of a static banner with one line of text.',
});

Please refer to src/demo for examples.

Options

These options are compatible with both <Banner> and StaticBanner.show()

Name	Type	Description	Default
open	boolean	(required) Indicates whether or not the banner is displayed	false
label	string	(required) Text label that appears on the banner	''
icon	element	Material icon to be displayed on the left side of the banner	null
iconProps	object	Additional properties that can be passed to the icon. See https://material-ui.com/api/avatar/	{}
showDismissButton	boolean	Whether or not to display the default "Dismiss" button	true
dismissButtonLabel	string	Text label for the default "Dismiss" button	'Dismiss'
dismissButtonProps	object	Additional properties that can be passed to the default "Dismiss" button. See https://material-ui.com/api/button/	{}
onClose	function	Callback invoked when clicking the Dismiss button. StaticBanner passes a close handler automatically	null
buttonLabel	string	If provided, add a second button (or only button, if the dismiss button is hidden)	null
buttonOnClick	function	Click event handler for the custom second button	null
buttonComponent	element	The element to be used for the custom second button (passed as component={buttonComponent} in MuiButton)	'button'
buttonProps	objct	Additional properties that can be passed to the button. See https://material-ui.com/api/button/	{}
paperProps	objct	Additional properties that can be passed to the Paper component. See https://material-ui.com/api/paper/	{}
cardProps	objct	Additional properties that can be passed to the Card component. See https://material-ui.com/api/card/. If `appBar` is set to `true`, you can also use this parameter to pass in properties to the `Container` component. See `https://material-ui.com/api/container/`	{}
appBar	boolean	Set to true if the banner should appear at the very top of the page beneath the AppBar component	false

License

Uses the MIT License

Changelog

[3.0.1] - 2021-09-22

Changed

• Update material-ui peer-dep to 5.0