AnnounceKit logo

ReactJs Component

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: