@react-hookz/web - npm Package Compare versions

Comparing version 6.1.0 to 7.0.0

CHANGELOG.md

@@ -0,1 +1,18 @@
+# [7.0.0](https://github.com/react-hookz/web/compare/v6.1.0...v7.0.0) (2021-08-06)
+
+
+### Bug Fixes
+
+* **useMediaQuery:** add support for safari 13- that has obsolete `useMediaQuery` implementation ([#249](https://github.com/react-hookz/web/issues/249)) ([25c8599](https://github.com/react-hookz/web/commit/25c85991c7e3af1f474b67b3264d76b74744f768)), closes [#242](https://github.com/react-hookz/web/issues/242)
+
+
+### Code Refactoring
+
+* **useKeyboardEvent:** improve the code and change signature ([#248](https://github.com/react-hookz/web/issues/248)) ([a0e1b24](https://github.com/react-hookz/web/commit/a0e1b243f5ad899d5617ce50016902bfc775b5c2))
+
+
+### BREAKING CHANGES
+
+* **useKeyboardEvent:** hook call signature has changed.
+
 # [6.1.0](https://github.com/react-hookz/web/compare/v6.0.1...v6.1.0) (2021-08-04)
@@ -2,0 +19,0 @@

cjs/useKeyboardEvent/useKeyboardEvent.d.ts

 import { DependencyList, RefObject } from 'react';
 export declare type IKeyboardEventPredicate = (event: KeyboardEvent) => boolean;
-export declare type IKeyboardEventFilter = null | undefined | string | IKeyboardEventPredicate;
-export declare type IKeyboardEventHandler = (event: KeyboardEvent) => void;
+export declare type IKeyboardEventFilter = null | undefined | string | boolean | IKeyboardEventPredicate;
+export declare type IKeyboardEventHandler<T extends EventTarget> = (this: T, event: KeyboardEvent) => void;
 export declare type IUseKeyboardEventOptions<T extends EventTarget> = {
+    /**
+     * Event name that triggers handler.
+     * @default `keydown`
+     */
     event?: 'keydown' | 'keypress' | 'keyup';
+    /**
+     * Target that should emit event.
+     * @default window
+     */
     target?: RefObject<T> | T | null;
+    /**
+     * Options that will be passed to underlying `useEventListener` hook.
+     */
     eventOptions?: boolean | AddEventListenerOptions;
 };
 /**
- *  React hook to execute a handler when a key is used
- *  it on unmount.
+ * Executes callback when keyboard event occurred on target (window by default).
  *
- * @param keyOrPredicate Key filter can be `string` or callback function accept a KeyboardEvent and return a boolean.
- * @param callback callback function to call when key is used accept a KeyboardEvent
- * @param deps Dependencies list that will be passed to underlying `useMemo`
- * @param options some options passed to addEventListener, event can be `[keydown, keyup, keypress]`, target is the event target default `window`, eventOptions is the third parameter of `addEventListener`.
+ * @param keyOrPredicate Filters keypresses on which `callback` will be executed.
+ * @param callback Function to call when key is pressed and `keyOrPredicate` matches positive.
+ * @param deps Dependencies list that will be passed to underlying `useMemo`.
+ * @param options Hook options.
  */
-export declare function useKeyboardEvent<T extends EventTarget>(keyOrPredicate: IKeyboardEventFilter, callback?: IKeyboardEventHandler, deps?: DependencyList, options?: IUseKeyboardEventOptions<T>): void;
+export declare function useKeyboardEvent<T extends EventTarget>(keyOrPredicate: IKeyboardEventFilter, callback: IKeyboardEventHandler<T>, deps?: DependencyList, options?: IUseKeyboardEventOptions<T>): void;

cjs/useKeyboardEvent/useKeyboardEvent.js

@@ -12,34 +12,29 @@ "use strict";
     if (typeof keyFilter === 'string')
-        return function (event) { return event.key === keyFilter; };
+        return function (ev) { return ev.key === keyFilter; };
     return keyFilter ? misc_1.yieldTrue : misc_1.yieldFalse;
 };
+var WINDOW_OR_NULL = const_1.isBrowser ? window : null;
 /**
- *  React hook to execute a handler when a key is used
- *  it on unmount.
+ * Executes callback when keyboard event occurred on target (window by default).
  *
- * @param keyOrPredicate Key filter can be `string` or callback function accept a KeyboardEvent and return a boolean.
- * @param callback callback function to call when key is used accept a KeyboardEvent
- * @param deps Dependencies list that will be passed to underlying `useMemo`
- * @param options some options passed to addEventListener, event can be `[keydown, keyup, keypress]`, target is the event target default `window`, eventOptions is the third parameter of `addEventListener`.
+ * @param keyOrPredicate Filters keypresses on which `callback` will be executed.
+ * @param callback Function to call when key is pressed and `keyOrPredicate` matches positive.
+ * @param deps Dependencies list that will be passed to underlying `useMemo`.
+ * @param options Hook options.
  */
 function useKeyboardEvent(keyOrPredicate, callback, deps, options) {
-    if (callback === void 0) { callback = const_1.noop; }
-    if (deps === void 0) { deps = [keyOrPredicate]; }
     if (options === void 0) { options = {}; }
-    var windowOrNull = const_1.isBrowser ? window : null;
-    var _a = options.event, event = _a === void 0 ? 'keydown' : _a, _b = options.target, target = _b === void 0 ? windowOrNull : _b, eventOptions = options.eventOptions;
-    var memoHandler = react_1.useMemo(function () {
+    var _a = options.event, event = _a === void 0 ? 'keydown' : _a, _b = options.target, target = _b === void 0 ? WINDOW_OR_NULL : _b, eventOptions = options.eventOptions;
+    var cbRef = __1.useSyncedRef(callback);
+    var handler = react_1.useMemo(function () {
         var predicate = createKeyPredicate(keyOrPredicate);
-        // eslint-disable-next-line func-names
-        var handler = function (handlerEvent) {
-            if (predicate(handlerEvent)) {
-                // @ts-expect-error useEventListener will handle this reference to target
-                callback.call(this, handlerEvent);
+        return function kbEventHandler(ev) {
+            if (predicate(ev)) {
+                cbRef.current.call(this, ev);
             }
         };
-        return handler;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, deps);
-    __1.useEventListener(target, event, memoHandler, eventOptions);
+    __1.useEventListener(target, event, handler, eventOptions);
 }
 exports.useKeyboardEvent = useKeyboardEvent;

cjs/useMediaQuery/useMediaQuery.js

@@ -17,3 +17,6 @@ "use strict";
         };
-        mql_1.addEventListener('change', listener, { passive: true });
+        if (mql_1.addEventListener)
+            mql_1.addEventListener('change', listener, { passive: true });
+        else
+            mql_1.addListener(listener);
         entry = {
@@ -38,3 +41,6 @@ mql: mql_1,
             queriesMap.delete(query);
-            mql.removeEventListener('change', listener);
+            if (mql.removeEventListener)
+                mql.removeEventListener('change', listener);
+            else
+                mql.removeListener(listener);
         }
@@ -41,0 +47,0 @@ }

esm/useKeyboardEvent/useKeyboardEvent.d.ts

 import { DependencyList, RefObject } from 'react';
 export declare type IKeyboardEventPredicate = (event: KeyboardEvent) => boolean;
-export declare type IKeyboardEventFilter = null | undefined | string | IKeyboardEventPredicate;
-export declare type IKeyboardEventHandler = (event: KeyboardEvent) => void;
+export declare type IKeyboardEventFilter = null | undefined | string | boolean | IKeyboardEventPredicate;
+export declare type IKeyboardEventHandler<T extends EventTarget> = (this: T, event: KeyboardEvent) => void;
 export declare type IUseKeyboardEventOptions<T extends EventTarget> = {
+    /**
+     * Event name that triggers handler.
+     * @default `keydown`
+     */
     event?: 'keydown' | 'keypress' | 'keyup';
+    /**
+     * Target that should emit event.
+     * @default window
+     */
     target?: RefObject<T> | T | null;
+    /**
+     * Options that will be passed to underlying `useEventListener` hook.
+     */
     eventOptions?: boolean | AddEventListenerOptions;
 };
 /**
- *  React hook to execute a handler when a key is used
- *  it on unmount.
+ * Executes callback when keyboard event occurred on target (window by default).
  *
- * @param keyOrPredicate Key filter can be `string` or callback function accept a KeyboardEvent and return a boolean.
- * @param callback callback function to call when key is used accept a KeyboardEvent
- * @param deps Dependencies list that will be passed to underlying `useMemo`
- * @param options some options passed to addEventListener, event can be `[keydown, keyup, keypress]`, target is the event target default `window`, eventOptions is the third parameter of `addEventListener`.
+ * @param keyOrPredicate Filters keypresses on which `callback` will be executed.
+ * @param callback Function to call when key is pressed and `keyOrPredicate` matches positive.
+ * @param deps Dependencies list that will be passed to underlying `useMemo`.
+ * @param options Hook options.
  */
-export declare function useKeyboardEvent<T extends EventTarget>(keyOrPredicate: IKeyboardEventFilter, callback?: IKeyboardEventHandler, deps?: DependencyList, options?: IUseKeyboardEventOptions<T>): void;
+export declare function useKeyboardEvent<T extends EventTarget>(keyOrPredicate: IKeyboardEventFilter, callback: IKeyboardEventHandler<T>, deps?: DependencyList, options?: IUseKeyboardEventOptions<T>): void;

esm/useKeyboardEvent/useKeyboardEvent.js

 import { useMemo } from 'react';
-import { useEventListener } from '..';
-import { noop, isBrowser } from "../util/const.js";
-import { yieldTrue, yieldFalse } from "../util/misc.js";
+import { useEventListener, useSyncedRef } from '..';
+import { isBrowser } from "../util/const.js";
+import { yieldFalse, yieldTrue } from "../util/misc.js";
 var createKeyPredicate = function (keyFilter) {
@@ -9,33 +9,28 @@ if (typeof keyFilter === 'function')
     if (typeof keyFilter === 'string')
-        return function (event) { return event.key === keyFilter; };
+        return function (ev) { return ev.key === keyFilter; };
     return keyFilter ? yieldTrue : yieldFalse;
 };
+var WINDOW_OR_NULL = isBrowser ? window : null;
 /**
- *  React hook to execute a handler when a key is used
- *  it on unmount.
+ * Executes callback when keyboard event occurred on target (window by default).
  *
- * @param keyOrPredicate Key filter can be `string` or callback function accept a KeyboardEvent and return a boolean.
- * @param callback callback function to call when key is used accept a KeyboardEvent
- * @param deps Dependencies list that will be passed to underlying `useMemo`
- * @param options some options passed to addEventListener, event can be `[keydown, keyup, keypress]`, target is the event target default `window`, eventOptions is the third parameter of `addEventListener`.
+ * @param keyOrPredicate Filters keypresses on which `callback` will be executed.
+ * @param callback Function to call when key is pressed and `keyOrPredicate` matches positive.
+ * @param deps Dependencies list that will be passed to underlying `useMemo`.
+ * @param options Hook options.
  */
 export function useKeyboardEvent(keyOrPredicate, callback, deps, options) {
-    if (callback === void 0) { callback = noop; }
-    if (deps === void 0) { deps = [keyOrPredicate]; }
     if (options === void 0) { options = {}; }
-    var windowOrNull = isBrowser ? window : null;
-    var _a = options.event, event = _a === void 0 ? 'keydown' : _a, _b = options.target, target = _b === void 0 ? windowOrNull : _b, eventOptions = options.eventOptions;
-    var memoHandler = useMemo(function () {
+    var _a = options.event, event = _a === void 0 ? 'keydown' : _a, _b = options.target, target = _b === void 0 ? WINDOW_OR_NULL : _b, eventOptions = options.eventOptions;
+    var cbRef = useSyncedRef(callback);
+    var handler = useMemo(function () {
         var predicate = createKeyPredicate(keyOrPredicate);
-        // eslint-disable-next-line func-names
-        var handler = function (handlerEvent) {
-            if (predicate(handlerEvent)) {
-                // @ts-expect-error useEventListener will handle this reference to target
-                callback.call(this, handlerEvent);
+        return function kbEventHandler(ev) {
+            if (predicate(ev)) {
+                cbRef.current.call(this, ev);
             }
         };
-        return handler;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, deps);
-    useEventListener(target, event, memoHandler, eventOptions);
+    useEventListener(target, event, handler, eventOptions);
 }

esm/useMediaQuery/useMediaQuery.js

@@ -14,3 +14,6 @@ import { useEffect } from 'react';
         };
-        mql_1.addEventListener('change', listener, { passive: true });
+        if (mql_1.addEventListener)
+            mql_1.addEventListener('change', listener, { passive: true });
+        else
+            mql_1.addListener(listener);
         entry = {
@@ -35,3 +38,6 @@ mql: mql_1,
             queriesMap.delete(query);
-            mql.removeEventListener('change', listener);
+            if (mql.removeEventListener)
+                mql.removeEventListener('change', listener);
+            else
+                mql.removeListener(listener);
         }
@@ -38,0 +44,0 @@ }

esnext/useKeyboardEvent/useKeyboardEvent.d.ts

 import { DependencyList, RefObject } from 'react';
 export declare type IKeyboardEventPredicate = (event: KeyboardEvent) => boolean;
-export declare type IKeyboardEventFilter = null | undefined | string | IKeyboardEventPredicate;
-export declare type IKeyboardEventHandler = (event: KeyboardEvent) => void;
+export declare type IKeyboardEventFilter = null | undefined | string | boolean | IKeyboardEventPredicate;
+export declare type IKeyboardEventHandler<T extends EventTarget> = (this: T, event: KeyboardEvent) => void;
 export declare type IUseKeyboardEventOptions<T extends EventTarget> = {
+    /**
+     * Event name that triggers handler.
+     * @default `keydown`
+     */
     event?: 'keydown' | 'keypress' | 'keyup';
+    /**
+     * Target that should emit event.
+     * @default window
+     */
     target?: RefObject<T> | T | null;
+    /**
+     * Options that will be passed to underlying `useEventListener` hook.
+     */
     eventOptions?: boolean | AddEventListenerOptions;
 };
 /**
- *  React hook to execute a handler when a key is used
- *  it on unmount.
+ * Executes callback when keyboard event occurred on target (window by default).
  *
- * @param keyOrPredicate Key filter can be `string` or callback function accept a KeyboardEvent and return a boolean.
- * @param callback callback function to call when key is used accept a KeyboardEvent
- * @param deps Dependencies list that will be passed to underlying `useMemo`
- * @param options some options passed to addEventListener, event can be `[keydown, keyup, keypress]`, target is the event target default `window`, eventOptions is the third parameter of `addEventListener`.
+ * @param keyOrPredicate Filters keypresses on which `callback` will be executed.
+ * @param callback Function to call when key is pressed and `keyOrPredicate` matches positive.
+ * @param deps Dependencies list that will be passed to underlying `useMemo`.
+ * @param options Hook options.
  */
-export declare function useKeyboardEvent<T extends EventTarget>(keyOrPredicate: IKeyboardEventFilter, callback?: IKeyboardEventHandler, deps?: DependencyList, options?: IUseKeyboardEventOptions<T>): void;
+export declare function useKeyboardEvent<T extends EventTarget>(keyOrPredicate: IKeyboardEventFilter, callback: IKeyboardEventHandler<T>, deps?: DependencyList, options?: IUseKeyboardEventOptions<T>): void;

esnext/useKeyboardEvent/useKeyboardEvent.js

 import { useMemo } from 'react';
-import { useEventListener } from '..';
-import { noop, isBrowser } from "../util/const.js";
-import { yieldTrue, yieldFalse } from "../util/misc.js";
+import { useEventListener, useSyncedRef } from '..';
+import { isBrowser } from "../util/const.js";
+import { yieldFalse, yieldTrue } from "../util/misc.js";
 const createKeyPredicate = (keyFilter) => {
@@ -9,30 +9,27 @@ if (typeof keyFilter === 'function')
     if (typeof keyFilter === 'string')
-        return (event) => event.key === keyFilter;
+        return (ev) => ev.key === keyFilter;
     return keyFilter ? yieldTrue : yieldFalse;
 };
+const WINDOW_OR_NULL = isBrowser ? window : null;
 /**
- *  React hook to execute a handler when a key is used
- *  it on unmount.
+ * Executes callback when keyboard event occurred on target (window by default).
  *
- * @param keyOrPredicate Key filter can be `string` or callback function accept a KeyboardEvent and return a boolean.
- * @param callback callback function to call when key is used accept a KeyboardEvent
- * @param deps Dependencies list that will be passed to underlying `useMemo`
- * @param options some options passed to addEventListener, event can be `[keydown, keyup, keypress]`, target is the event target default `window`, eventOptions is the third parameter of `addEventListener`.
+ * @param keyOrPredicate Filters keypresses on which `callback` will be executed.
+ * @param callback Function to call when key is pressed and `keyOrPredicate` matches positive.
+ * @param deps Dependencies list that will be passed to underlying `useMemo`.
+ * @param options Hook options.
  */
-export function useKeyboardEvent(keyOrPredicate, callback = noop, deps = [keyOrPredicate], options = {}) {
-    const windowOrNull = isBrowser ? window : null;
-    const { event = 'keydown', target = windowOrNull, eventOptions } = options;
-    const memoHandler = useMemo(() => {
+export function useKeyboardEvent(keyOrPredicate, callback, deps, options = {}) {
+    const { event = 'keydown', target = WINDOW_OR_NULL, eventOptions } = options;
+    const cbRef = useSyncedRef(callback);
+    const handler = useMemo(() => {
         const predicate = createKeyPredicate(keyOrPredicate);
-        // eslint-disable-next-line func-names
-        const handler = function (handlerEvent) {
-            if (predicate(handlerEvent)) {
-                // @ts-expect-error useEventListener will handle this reference to target
-                callback.call(this, handlerEvent);
+        return function kbEventHandler(ev) {
+            if (predicate(ev)) {
+                cbRef.current.call(this, ev);
             }
         };
-        return handler;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, deps);
-    useEventListener(target, event, memoHandler, eventOptions);
+    useEventListener(target, event, handler, eventOptions);
 }

esnext/useMediaQuery/useMediaQuery.js

@@ -14,3 +14,6 @@ import { useEffect } from 'react';
         };
-        mql.addEventListener('change', listener, { passive: true });
+        if (mql.addEventListener)
+            mql.addEventListener('change', listener, { passive: true });
+        else
+            mql.addListener(listener);
         entry = {
@@ -35,3 +38,6 @@ mql,
             queriesMap.delete(query);
-            mql.removeEventListener('change', listener);
+            if (mql.removeEventListener)
+                mql.removeEventListener('change', listener);
+            else
+                mql.removeListener(listener);
         }
@@ -38,0 +44,0 @@ }

package.json

 {
   "name": "@react-hookz/web",
-  "version": "6.1.0",
+  "version": "7.0.0",
   "description": "React hooks done right, for browser and SSR.",
@@ -84,3 +84,3 @@ "keywords": [
   "devDependencies": {
-    "@babel/core": "^7.14.8",
+    "@babel/core": "^7.15.0",
     "@commitlint/cli": "^13.1.0",
@@ -87,0 +87,0 @@ "@commitlint/config-conventional": "^13.1.0",

README.md

@@ -162,1 +162,3 @@ <div align="center">
     — Subscribes an event listener to the target, and automatically unsubscribes it on unmount.
+  - [**`useKeyboardEvent`**](https://react-hookz.github.io/web/?path=/docs/dom-usekeyboardevent)
+    — Executes callback when keyboard event occurred on target.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

327389

increased by0.17%

Lines of code

6742

increased by0.52%

Number of lines in readme file

164

increased by1.23%

No dependency changes