This package provides a single component which shows a message/announcement bar. A dismiss button is available and clickable to close the message for the current and further sessions.
LocalStorage is used to hold the 'dismiss-state'.
The component can receive an announcement-id
prop to set a new
message, which overrides the previous (dismissed) message.
npm i react-message-bar
Import react-message-bar
import ReactMessageBar from 'react-message-bar'
Add default styling (optional)
import 'react-message-bar/lib/styles/default.css'
Use the component in your app
<ReactMessageBar>Hello, welcome to this announcement!</ReactMessageBar>
Or, to override dismissed bars
<ReactMessageBar messageId="message-2">Hello, welcome to this NEW announcement!</ReactMessageBar>
Default styling is provided via CSS. All elements have classnames to apply your own styling.
Name | Type | Description |
---|---|---|
messageId |
String |
Set whether you want to make sure your message is shown to all users, including which have dismissed the bar. |