react-calendly - npm Package Compare versions

Comparing version 3.0.3 to 4.0.0-beta.0

CHANGELOG.md

 # Changelog
 
+## 4.0.0
+
+- Replaced `CalendlyEventListener` component with `useCalendlyEventListener` hook (https://github.com/tcampb/react-calendly/issues/45).
+
 ## 3.0.3
@@ -4,0 +8,0 @@

dist/index.es.js

@@ -1,2 +0,2 @@
-import { createElement, Component, Fragment } from 'react';
+import { createElement, Component, Fragment, useEffect } from 'react';
 import { createPortal } from 'react-dom';
@@ -301,37 +301,29 @@
 
-var CalendlyEventListener = /** @class */ (function (_super) {
-    __extends(CalendlyEventListener, _super);
-    function CalendlyEventListener(props) {
-        var _this = _super.call(this, props) || this;
-        _this.handleEvent = _this.handleEvent.bind(_this);
-        return _this;
-    }
-    CalendlyEventListener.prototype.componentDidMount = function () {
-        window.addEventListener("message", this.handleEvent);
-    };
-    CalendlyEventListener.prototype.componentWillUnmount = function () {
-        window.removeEventListener("message", this.handleEvent);
-    };
-    CalendlyEventListener.prototype.handleEvent = function (e) {
-        var eventName = e.data.event;
-        if (eventName === CalendlyEvent.DATE_AND_TIME_SELECTED) {
-            this.props.onDateAndTimeSelected && this.props.onDateAndTimeSelected(e);
-        }
-        else if (eventName === CalendlyEvent.EVENT_SCHEDULED) {
-            this.props.onEventScheduled && this.props.onEventScheduled(e);
-        }
-        else if (eventName === CalendlyEvent.EVENT_TYPE_VIEWED) {
-            this.props.onEventTypeViewed && this.props.onEventTypeViewed(e);
-        }
-        else if (eventName === CalendlyEvent.PROFILE_PAGE_VIEWED) {
-            this.props.onProfilePageViewed && this.props.onProfilePageViewed(e);
-        }
-    };
-    CalendlyEventListener.prototype.render = function () {
-        return this.props.children || null;
-    };
-    return CalendlyEventListener;
-}(Component));
+var EVENT_NAME = "message";
+function useCalendlyEventListener(eventHandlers) {
+    var _a = eventHandlers || {}, onDateAndTimeSelected = _a.onDateAndTimeSelected, onEventScheduled = _a.onEventScheduled, onEventTypeViewed = _a.onEventTypeViewed, onProfilePageViewed = _a.onProfilePageViewed;
+    useEffect(function () {
+        var onMessage = function (e) {
+            var eventName = e.data.event;
+            if (eventName === CalendlyEvent.DATE_AND_TIME_SELECTED) {
+                onDateAndTimeSelected && onDateAndTimeSelected(e);
+            }
+            else if (eventName === CalendlyEvent.EVENT_SCHEDULED) {
+                onEventScheduled && onEventScheduled(e);
+            }
+            else if (eventName === CalendlyEvent.EVENT_TYPE_VIEWED) {
+                onEventTypeViewed && onEventTypeViewed(e);
+            }
+            else if (eventName === CalendlyEvent.PROFILE_PAGE_VIEWED) {
+                onProfilePageViewed && onProfilePageViewed(e);
+            }
+        };
+        window.addEventListener(EVENT_NAME, onMessage);
+        return function cleanup() {
+            window.removeEventListener(EVENT_NAME, onMessage);
+        };
+    }, [eventHandlers]);
+}
 
-export { InlineWidget, PopupButton, PopupWidget, Modal as PopupModal, CalendlyEventListener };
+export { InlineWidget, PopupButton, PopupWidget, Modal as PopupModal, useCalendlyEventListener };
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -305,35 +305,27 @@ 'use strict';
 
-var CalendlyEventListener = /** @class */ (function (_super) {
-    __extends(CalendlyEventListener, _super);
-    function CalendlyEventListener(props) {
-        var _this = _super.call(this, props) || this;
-        _this.handleEvent = _this.handleEvent.bind(_this);
-        return _this;
-    }
-    CalendlyEventListener.prototype.componentDidMount = function () {
-        window.addEventListener("message", this.handleEvent);
-    };
-    CalendlyEventListener.prototype.componentWillUnmount = function () {
-        window.removeEventListener("message", this.handleEvent);
-    };
-    CalendlyEventListener.prototype.handleEvent = function (e) {
-        var eventName = e.data.event;
-        if (eventName === CalendlyEvent.DATE_AND_TIME_SELECTED) {
-            this.props.onDateAndTimeSelected && this.props.onDateAndTimeSelected(e);
-        }
-        else if (eventName === CalendlyEvent.EVENT_SCHEDULED) {
-            this.props.onEventScheduled && this.props.onEventScheduled(e);
-        }
-        else if (eventName === CalendlyEvent.EVENT_TYPE_VIEWED) {
-            this.props.onEventTypeViewed && this.props.onEventTypeViewed(e);
-        }
-        else if (eventName === CalendlyEvent.PROFILE_PAGE_VIEWED) {
-            this.props.onProfilePageViewed && this.props.onProfilePageViewed(e);
-        }
-    };
-    CalendlyEventListener.prototype.render = function () {
-        return this.props.children || null;
-    };
-    return CalendlyEventListener;
-}(React.Component));
+var EVENT_NAME = "message";
+function useCalendlyEventListener(eventHandlers) {
+    var _a = eventHandlers || {}, onDateAndTimeSelected = _a.onDateAndTimeSelected, onEventScheduled = _a.onEventScheduled, onEventTypeViewed = _a.onEventTypeViewed, onProfilePageViewed = _a.onProfilePageViewed;
+    React.useEffect(function () {
+        var onMessage = function (e) {
+            var eventName = e.data.event;
+            if (eventName === CalendlyEvent.DATE_AND_TIME_SELECTED) {
+                onDateAndTimeSelected && onDateAndTimeSelected(e);
+            }
+            else if (eventName === CalendlyEvent.EVENT_SCHEDULED) {
+                onEventScheduled && onEventScheduled(e);
+            }
+            else if (eventName === CalendlyEvent.EVENT_TYPE_VIEWED) {
+                onEventTypeViewed && onEventTypeViewed(e);
+            }
+            else if (eventName === CalendlyEvent.PROFILE_PAGE_VIEWED) {
+                onProfilePageViewed && onProfilePageViewed(e);
+            }
+        };
+        window.addEventListener(EVENT_NAME, onMessage);
+        return function cleanup() {
+            window.removeEventListener(EVENT_NAME, onMessage);
+        };
+    }, [eventHandlers]);
+}
 
@@ -344,3 +336,3 @@ exports.InlineWidget = InlineWidget;
 exports.PopupModal = Modal;
-exports.CalendlyEventListener = CalendlyEventListener;
+exports.useCalendlyEventListener = useCalendlyEventListener;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-calendly",
-  "version": "3.0.3",
+  "version": "4.0.0-beta.0",
   "description": "Calendly integration for React apps",
@@ -33,4 +33,4 @@ "author": "tcampb",
   "peerDependencies": {
-    "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
   },
@@ -50,4 +50,4 @@ "devDependencies": {
     "@types/node": "^13.9.5",
-    "@types/react": "^16.3.13",
-    "@types/react-dom": "^16.0.5",
+    "@types/react": "^16.8.0",
+    "@types/react-dom": "^16.8.0",
     "babel-core": "^6.26.3",
@@ -61,5 +61,5 @@ "babel-loader": "^7.1.5",
     "prettier": "2.0.2",
-    "react": "^16.4.1",
+    "react": "^16.8.0",
     "react-docgen-typescript-loader": "^3.7.1",
-    "react-dom": "^16.4.1",
+    "react-dom": "^16.8.0",
     "react-scripts": "3.3.0",
@@ -66,0 +66,0 @@ "rollup": "^0.62.0",

README.md

@@ -33,3 +33,3 @@ # react-calendly
 - [Custom Button](https://tcampb.github.io/react-calendly/?path=/story/components--custom-button)
-- [CalendlyEventListener](https://tcampb.github.io/react-calendly/?path=/story/components--calendlyeventlistener)
+- [useCalendlyEventListener](https://tcampb.github.io/react-calendly/?path=/story/components--usecalendlyeventlistener)
 
@@ -219,3 +219,3 @@ #### InlineWidget
 
-The [CalendlyEventListener](https://tcampb.github.io/react-calendly/?path=/story/components--calendlyeventlistener) `onEventScheduled` prop receives an event with the following data structure:
+The [useCalendlyEventListener](https://tcampb.github.io/react-calendly/?path=/story/components--usecalendlyeventlistener) `onEventScheduled` prop receives an event with the following data structure:
 
@@ -222,0 +222,0 @@ ```javascript

typings/index.d.ts

@@ -5,4 +5,4 @@ import InlineWidget from "./components/InlineWidget/InlineWidget";
 import PopupModal from "./components/PopupModal/Modal";
-import CalendlyEventListener from "./components/CalendlyEventListener/CalendlyEventListener";
-import type { DateAndTimeSelectedEvent, EventScheduledEvent, EventTypeViewedEvent, ProfilePageViewedEvent } from "./components/CalendlyEventListener/CalendlyEventListener";
+import useCalendlyEventListener from "./components/hooks/useCalendlyEventListener";
+import type { DateAndTimeSelectedEvent, EventScheduledEvent, EventTypeViewedEvent, ProfilePageViewedEvent } from "./components/hooks/useCalendlyEventListener";
 export { InlineWidget };
@@ -12,3 +12,3 @@ export { PopupButton };
 export { PopupModal };
-export { CalendlyEventListener };
+export { useCalendlyEventListener };
 export { DateAndTimeSelectedEvent, EventScheduledEvent, EventTypeViewedEvent, ProfilePageViewedEvent, };

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

137250

decreased by-1.57%

Number of package files

17

decreased by-19.05%

Lines of code

947

decreased by-5.68%

Number of low quality alerts

2

increased by100%

No dependency changes