@accessible/use-keycode - npm Package Compare versions

Comparing version 3.0.1 to 4.0.0

dist/cjs/index.d.ts

@@ -7,5 +7,4 @@ import {MutableRefObject} from 'react'
 export declare const useKeycodes: (
-  handlers: Record<number, (event: KeyboardEvent) => any>,
-  dependencies?: any[] | undefined
+  handlers: Record<number, (event: KeyboardEvent) => any>
 ) => MutableRefObject<any>
 export default useKeycode

dist/cjs/index.js

@@ -19,37 +19,34 @@ 'use strict'
 const useKeycode = (which, callback) =>
-  useKeycodes(
-    {
-      [which]: callback,
-    },
-    [which, callback]
-  )
+  useKeycodes({
+    [which]: callback,
+  })
 
 exports.useKeycode = useKeycode
 
-const useKeycodes = (handlers, dependencies) => {
+const useKeycodes = handlers => {
   const ref = useRef(null)
+  const storedHandlers = useRef(handlers)
+  storedHandlers.current = handlers
 
   function _ref(event) {
-    var _handlers$event$which
+    var _storedHandlers$curre, _storedHandlers$curre2
 
-    ;(_handlers$event$which = handlers[event.which]) === null ||
-    _handlers$event$which === void 0
+    ;(_storedHandlers$curre = (_storedHandlers$curre2 = storedHandlers.current)[
+      event.which
+    ]) === null || _storedHandlers$curre === void 0
       ? void 0
-      : _handlers$event$which.call(handlers, event)
+      : _storedHandlers$curre.call(_storedHandlers$curre2, event)
   }
 
-  ;(0, _passiveLayoutEffect.default)(
-    () => {
-      const current = ref.current
+  ;(0, _passiveLayoutEffect.default)(() => {
+    const current = ref.current
 
-      if (current) {
-        const maybeCallback = _ref
-        current.addEventListener('keydown', maybeCallback)
-        return () => {
-          current.removeEventListener('keydown', maybeCallback)
-        }
+    if (current) {
+      const maybeCallback = _ref
+      current.addEventListener('keydown', maybeCallback)
+      return () => {
+        current.removeEventListener('keydown', maybeCallback)
       }
-    },
-    dependencies ? [ref.current].concat(dependencies) : void 0
-  )
+    }
+  }, [ref])
   return ref
@@ -56,0 +53,0 @@ }

dist/es/index.d.ts

@@ -7,5 +7,4 @@ import {MutableRefObject} from 'react'
 export declare const useKeycodes: (
-  handlers: Record<number, (event: KeyboardEvent) => any>,
-  dependencies?: any[] | undefined
+  handlers: Record<number, (event: KeyboardEvent) => any>
 ) => MutableRefObject<any>
 export default useKeycode

dist/es/index.js

@@ -5,36 +5,33 @@ import React from 'react'
 export const useKeycode = (which, callback) =>
-  useKeycodes(
-    {
-      [which]: callback,
-    },
-    [which, callback]
-  )
-export const useKeycodes = (handlers, dependencies) => {
+  useKeycodes({
+    [which]: callback,
+  })
+export const useKeycodes = handlers => {
   const ref = useRef(null)
+  const storedHandlers = useRef(handlers)
+  storedHandlers.current = handlers
 
   function _ref(event) {
-    var _handlers$event$which
+    var _storedHandlers$curre, _storedHandlers$curre2
 
-    ;(_handlers$event$which = handlers[event.which]) === null ||
-    _handlers$event$which === void 0
+    ;(_storedHandlers$curre = (_storedHandlers$curre2 = storedHandlers.current)[
+      event.which
+    ]) === null || _storedHandlers$curre === void 0
       ? void 0
-      : _handlers$event$which.call(handlers, event)
+      : _storedHandlers$curre.call(_storedHandlers$curre2, event)
   }
 
-  useLayoutEffect(
-    () => {
-      const current = ref.current
+  useLayoutEffect(() => {
+    const current = ref.current
 
-      if (current) {
-        const maybeCallback = _ref
-        current.addEventListener('keydown', maybeCallback)
-        return () => {
-          current.removeEventListener('keydown', maybeCallback)
-        }
+    if (current) {
+      const maybeCallback = _ref
+      current.addEventListener('keydown', maybeCallback)
+      return () => {
+        current.removeEventListener('keydown', maybeCallback)
       }
-    },
-    dependencies ? [ref.current].concat(dependencies) : void 0
-  )
+    }
+  }, [ref])
   return ref
 }
 export default useKeycode

package.json

 {
   "name": "@accessible/use-keycode",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "homepage": "https://github.com/accessible-ui/use-keycode#readme",
@@ -5,0 +5,0 @@ "repository": "github:accessible-ui/use-keycode",

README.md

@@ -44,3 +44,3 @@ <hr>
   // logs event when escape or enter key is pressed
-  const ref = useKeycodes({27: console.log, 13: console.log}, [console.log])
+  const ref = useKeycodes({27: console.log, 13: console.log})
   return <div ref={ref} />
@@ -63,10 +63,9 @@ }
 
-### `useKeycodes(handlers: Record<number, (event?: KeyboardEvent) => any>, dependencies?: any[])`
+### `useKeycodes(handlers: Record<number, (event?: KeyboardEvent) => any>)`
 
 #### Arguments
 
-| Argument       | Type                                             | Default     | Required? | Description                                                                                                                                     |
-| -------------- | ------------------------------------------------ | ----------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
-| `handlers`     | `Record<number, (event?: KeyboardEvent) => any>` | `undefined` | Yes       | An object with keys matching the `event.which` you want to trigger the callback value                                                           |
-| `dependencies` | `any[]`                                          | `undefined` | No        | A list of dependencies that your handlers depend on. If no dependencies are provided, listeners will be removed and re-attached on each render. |
+| Argument   | Type                                             | Default     | Required? | Description                                                                           |
+| ---------- | ------------------------------------------------ | ----------- | --------- | ------------------------------------------------------------------------------------- |
+| `handlers` | `Record<number, (event?: KeyboardEvent) => any>` | `undefined` | Yes       | An object with keys matching the `event.which` you want to trigger the callback value |
 
@@ -73,0 +72,0 @@ #### Returns `React.MutableRefObject<any>`

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

Worsened metrics

Total package byte prevSize

10334

decreased by-4.39%

Lines of code

93

decreased by-7.92%

Number of lines in readme file

75

decreased by-1.32%

No dependency changes