AnnounceKit 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/widget/adyGk.

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">Home</a></li>
            <li><a href="/product">Product</a></li>
            <li>
              <a href="#" className="ak-trigger">
                News
                <AnnounceKit catchClick=".ak-trigger" widget="https://announcekit.app/widget/adyGk"  />
              </a>
            </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 ID of the widget.
style Apply CSS rules to modify / fine-tune the position of the widget.
catchClick Element selector to catch clicks and trigger opening the widget.
floatWidget Set true if the widget is a Float widget.
widgetOpen Called when the widget is opened.
widgetClose Called when the widget is closed.
widgetResize Called when the widget is resized.
widgetUnread Called when unread post count of widget has been updated.

Please follow our Github repo for further updates.
Resources: