ReactJs Component | AnnounceKit Help Center

If you are one of the ReactJS users, you will probably know that dealing with externally loaded libraries in your ReactJS app is a little bit tricky. Firstly, you need to manually load the script, wait until it’s loaded, get the library variable, etc. You can also include the <script> in your main HTML file, but this technique is not quite a good solution.

Knowing all these boring stuff, we have created a ReactJS component, which can help you to include AnnounceKit Widget into your ReactJS App.

Step 1

Firstly, we install the component from NPM
npm install --save announcekit-react

Step 2

Before adding component to our ReactJS App, we need to get ID of the widget that we want to include into our app. You can find it in JavaScript widget config code, as widget key. In this case it is https://announcekit.app/widgets/v2/34MmKA

Step 3

As we have our widget ID, it is the time to include the component into our ReactJS app

import React from 'react';
import AnnounceKit from 'announcekit-react'; 
class App extends React.Component { 
 render() { 
  return ( 
   <div>
    <nav>
    <ul> 
     <li> 
      <a href="#">Home</a> 
     </li>
     <li> <AnnounceKit widget="https://announcekit.app/widgets/v2/34MmKA">
        <span>What's new</span>
     </AnnounceKit> 
     </li>
    </ul> 
    </nav>
   </div>
  )
 } 
}

As you see, we set catchClick property on the component. This will listen for click event on the specified element. click on that element will trigger the widget to open. This property is not mandatory, but most will be used with Badge and Line widgets.

That’s all!

Here is the properties list that component accepts. Some of them are very useful.

Property	Description
widget	The url of the widget.You can obtain it while creating or editing widget from Dashboard.
widgetStyle	Apply CSS rules to modify / fine-tune the position of the widget. Styling docs
catchClick	Element selector to catch clicks and trigger opening the widget.
floatWidget	Set true if the widget is a Float widget.
embedWidget	Set true if the widget is a Embed widget.
user	User properties (for user tracking)
data	Segmentation data
onWidgetOpen	Called when the widget is opened.
onWidgetClose	Called when the widget is closed.
onWidgetResize	Called when the widget is resized.
onWidgetUnread	Called when unread post count of widget has been updated.

Please follow our Github repo for further updates.
Resources: