Common react component for site announcements with role management

npm install react-site-announcement@1.0.3


React Site Announcement

This component is used to display website wide announcements like latest features pushed on the top.It uses react-draft-wysiwyg rich text content to edit and display text.

Using the Component

To be able to use the component, follow the steps below:

  • Install react-site-announcement in your application, this will install the latest release: npm i react-site-announcement@latest --save

  • Import the component: import { ReactSiteAnnouncement } from 'react-site-announcement' }


There are 4 methods under the snackToast API.

  1. isAdmin - A flag to indicate if the logged in user can edit the message.If this flag is set to yes , user can edit existing text , add new text, If set to false user will only be able to see the text.
  2. data - Accepts rich html text as input ,for eg: "{"blocks":[{"key":"13trq","text":"Important message!","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}],"entityMap":{}}"
  3. saveMessage - A function as callback that will be responsible for saving the messages to the backend , for eg: handleMessage=async (message) => { await saveMessageToBackend(message); }


 <ReactSiteAnnouncement isAdmin={true} data={this.state.alertData} saveMessage={this.handleMessage}/>