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