announcekit-react - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

dist/index.d.ts

@@ -5,3 +5,2 @@ import * as React from "react";
     catchClick?: string;
-    lang?: string;
     widgetStyle?: React.CSSProperties;
@@ -15,3 +14,3 @@ floatWidget?: boolean;
     user?: {
-        user_id: string;
+        id: string;
         [key: string]: any;
@@ -24,5 +23,6 @@ };
 export default class AnnounceKit extends React.Component<Props, {}> {
-    selector: string;
-    name: string;
-    widgetInstance: any;
+    private selector;
+    private name;
+    private widgetInstance;
+    private widgetHandlers;
     constructor(props: any);
@@ -32,5 +32,10 @@ shouldComponentUpdate(props: any): boolean;
     componentDidMount(): void;
-    loaded(): void;
+    private loaded;
+    private withWidget;
+    open(): Promise<{}>;
+    close(): Promise<{}>;
+    instance(): Promise<{}>;
+    unread(): Promise<{}>;
     render(): JSX.Element;
 }
 export {};

dist/index.js

@@ -40,2 +40,3 @@ "use strict";
             .substring(10);
+        _this.widgetHandlers = [];
         return _this;
@@ -106,2 +107,4 @@ }
                 }
+                _this.widgetHandlers.forEach(function (h) { return h(_widget); });
+                _this.widgetHandlers = [];
                 ann.on("widget-open", function (_a) {
@@ -131,6 +134,31 @@ var widget = _a.widget;
                 });
-            }, data: this.props.data, user: this.props.user, lang: this.props.lang }));
+            }, data: this.props.data, user: this.props.user }));
     };
+    AnnounceKit.prototype.withWidget = function (fn) {
+        var _this = this;
+        return new Promise(function (res) {
+            if (_this.widgetInstance) {
+                return res(fn(_this.widgetInstance));
+            }
+            else {
+                _this.widgetHandlers.push(function (widget) {
+                    res(fn(widget));
+                });
+            }
+        });
+    };
+    AnnounceKit.prototype.open = function () {
+        return this.withWidget(function (widget) { return widget.open(); });
+    };
+    AnnounceKit.prototype.close = function () {
+        return this.withWidget(function (widget) { return widget.close(); });
+    };
+    AnnounceKit.prototype.instance = function () {
+        return this.withWidget(function (widget) { return widget; });
+    };
+    AnnounceKit.prototype.unread = function () {
+        return this.withWidget(function (widget) { return widget.state.ui.unreadCount; });
+    };
     AnnounceKit.prototype.render = function () {
-        return (React.createElement("a", { href: "#", style: { display: "inline" }, className: this.selector ? this.selector.slice(1) : "" }, this.props.children));
+        return (React.createElement("div", { style: { display: "inline" }, className: this.selector ? this.selector.slice(1) : "" }, this.props.children));
     };
@@ -137,0 +165,0 @@ return AnnounceKit;

package.json

 {
   "name": "announcekit-react",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Use AnnounceKit widgets in your React App",
@@ -8,3 +8,5 @@ "main": "dist/index.js",
   "scripts": {
-    "build": "tsc"
+    "build": "tsc",
+    "publish": "npm publish && git push",
+    "deploy": "npm run-script build && npm run-script publish"
   },
@@ -11,0 +13,0 @@ "repository": "https://github.com/announcekitapp/announcekit-react",

readme.md

@@ -47,12 +47,9 @@ ![](https://announcekit.app/images/[e-mail])
 
-Common props you may want to specify include:
-
 - **`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.
-- `catchClick` - Element selector to catch clicks and open the widget.
+- `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.
 - `lang` - Language selector
-- `user` - User properties (for user tracking)
-- `data` - Segmentation data
+- `user` - User properties (for [user tracking](https://announcekit.app/docs#user-tracking))
+- `data` - [Segmentation data](https://announcekit.app/docs#segmentation)
 - `onWidgetOpen` - Called when the widget is opened.
@@ -62,1 +59,34 @@ - `onWidgetClose` - Called when the widget is closed.
 - `onWidgetUnread` - Called when unread post count of widget has been updated.
+
+## API
+
+You can use `ref` property to access the widget instance and call control functions
+
+- `open()`
+- `close()` 
+- `unread()`
+- `instance()`
+
+
+```js
+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.app/widgets/v2/3739N6">
+            <span>What's new</span>
+        </AnnounceKit>
+    </div>
+    )
+}
+```
+
+

No alert changes

Improved metrics

Total package byte prevSize

15651

increased by7.25%

Lines of code

376

increased by17.87%

Number of lines in readme file

91

increased by49.18%

Worsened metrics

Number of package files

6

decreased by-14.29%

No dependency changes