taro-shono / announcekit-react Goto Github PK

The easiest way to use AnnounceKit widgets in your React App.

Visit https://announcekit.app to get started with AnnounceKit.

CodeSandBox Demo

Documentation

yarn add announcekit-react

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.co/widgets/v2/3xdhio">
                <span>Whats new</span>
              </AnnounceKit>
            </li>
          </ul>
        </nav>
      </div>
    );
  }
}

• widget - The url of the widget. You can obtain it while creating or editing widget in AnnounceKit Dashboard.
• widgetStyle - You can apply CSS rules to modify / tune the position of the widget launcher.
• floatWidget - Set true if the widget is a Float widget.
• embedWidget - Set true if the widget is a Embed widget.
• boosters - In case you don't want to boosters appear on the page the widget is placed.
• lang - Language selector
• user - User properties (for user tracking)
• data - Segmentation data
• labels - In case you want to filter and display posts under a specific label or tag.
• user_token - JWT setup: https://announcekit.app/docs/jwt
• 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.

You can use ref property to access the widget instance and call control functions

• open()
• close()
• unread()
• instance()

function App() {
  const ref = React.createRef<AnnounceKit>();

  React.useEffect(() => {
    ref.current.unread().then(an => console.log("unread", an));
  });

  return (
    <div>
        <button onClick={async() => await ref.current.open()}>
            Click to open widget
        </button>
        <AnnounceKit ref={ref} widget="https://announcekit.co/widgets/v2/3xdhio">
            <span>Whats new</span>
        </AnnounceKit>
    </div>
    )
}