React Message Bar Component

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.

Demo

Install

npm i react-message-bar

Usage

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>

Styling

Default styling is provided via CSS. All elements have classnames to apply your own styling.

Props

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.