Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@use-it/event-listener
Advanced tools
@use-it/event-listener - npm Package Compare versions
Comparing version 0.1.3 to 0.1.4
@@ -1,1 +0,1 @@ | ||
| var e=require("react");module.exports=function(n,r,t){void 0===t&&(t=global);var u=e.useRef();e.useEffect(function(){u.current=r},[r]),e.useEffect(function(){if(t&&t.addEventListener){var e=function(e){return u.current(e)};return t.addEventListener(n,e),function(){t.removeEventListener(n,e)}}},[n,t])}; | ||
| var e=require("react");module.exports=function(r,n,t,u){void 0===t&&(t=global);var i=e.useRef();e.useEffect(function(){i.current=n},[n]);var o=u?u.capture:void 0,c=u?u.passive:void 0,v=e.useMemo(function(){return{capture:o,passive:c}},[o,c]);e.useEffect(function(){if(t&&t.addEventListener){var e=function(e){return i.current(e)};return t.addEventListener(r,e,v),function(){t.removeEventListener(r,e)}}},[r,t,v])}; |
@@ -1,1 +0,1 @@ | ||
| import{useRef as n,useEffect as t}from"react";export default function(e,r,i){void 0===i&&(i=global);var o=n();t(function(){o.current=r},[r]),t(function(){if(i&&i.addEventListener){var n=function(n){return o.current(n)};return i.addEventListener(e,n),function(){i.removeEventListener(e,n)}}},[e,i])} | ||
| import{useRef as e,useEffect as n,useMemo as r}from"react";export default function(t,i,o,u){void 0===o&&(o=global);var a=e();n(function(){a.current=i},[i]);var v=u?u.capture:void 0,c=u?u.passive:void 0,f=r(function(){return{capture:v,passive:c}},[v,c]);n(function(){if(o&&o.addEventListener){var e=function(e){return a.current(e)};return o.addEventListener(t,e,f),function(){o.removeEventListener(t,e)}}},[t,o,f])} |
@@ -1,1 +0,1 @@ | ||
| !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):e.eventListener=n(e.react)}(this,function(e){return function(n,t,r){void 0===r&&(r=global);var f=e.useRef();e.useEffect(function(){f.current=t},[t]),e.useEffect(function(){if(r&&r.addEventListener){var e=function(e){return f.current(e)};return r.addEventListener(n,e),function(){r.removeEventListener(n,e)}}},[n,r])}}); | ||
| !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):e.eventListener=n(e.react)}(this,function(e){return function(n,t,r,i){void 0===r&&(r=global);var u=e.useRef();e.useEffect(function(){u.current=t},[t]);var o=i?i.capture:void 0,f=i?i.passive:void 0,c=e.useMemo(function(){return{capture:o,passive:f}},[o,f]);e.useEffect(function(){if(r&&r.addEventListener){var e=function(e){return u.current(e)};return r.addEventListener(n,e,c),function(){r.removeEventListener(n,e)}}},[n,r,c])}}); |
@@ -6,3 +6,3 @@ { | ||
| }, | ||
| "version": "0.1.3", | ||
| "version": "0.1.4", | ||
| "description": "A custom React Hook that provides a useEventListener.", | ||
@@ -22,4 +22,5 @@ "main": "dist/event-listener.js", | ||
| "lint": "eslint src", | ||
| "test": "jest --verbose --coverage --silent", | ||
| "test": "jest --verbose --coverage --silent && tsc -p types/tsconfig.json", | ||
| "test:watch": "jest --watch --runInBand --silent", | ||
| "tsc": "tsc -p types/tsconfig.json", | ||
| "prebuild": "npm run lint && npm t && rimraf dist", | ||
@@ -42,2 +43,3 @@ "build": "microbundle -o dist/ --sourcemap false --target web", | ||
| "@babel/preset-react": "^7.0.0", | ||
| "@testing-library/react-hooks": "^3.2.1", | ||
| "babel-core": "^7.0.0-bridge.0", | ||
@@ -50,6 +52,7 @@ "babel-jest": "^23.6.0", | ||
| "microbundle": "^0.9.0", | ||
| "react": "^16.8.0", | ||
| "react-dom": "^16.8.0", | ||
| "react-testing-library": "^5.5.0", | ||
| "rimraf": "^2.6.2" | ||
| "react": "^16.9.0", | ||
| "react-dom": "^16.9.0", | ||
| "react-test-renderer": "^16.13.0", | ||
| "rimraf": "^2.6.2", | ||
| "typescript": "^3.8.3" | ||
| }, | ||
@@ -56,0 +59,0 @@ "peerDependencies": { |
@@ -33,3 +33,3 @@ # @use-it/event-listener | ||
| ```js | ||
| useEventListener(eventName, handler, element); | ||
| useEventListener(eventName, handler, element, options); | ||
| ``` | ||
@@ -46,2 +46,3 @@ | ||
| | `element`\* | An optional element to listen on. Defaults to `global` (i.e., `window`). | | ||
| | `options`\* | An object `{ capture?: boolean, passive?: boolean }` to be passed to `addEventListener`. For advanced use cases. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) for details. | | ||
@@ -107,7 +108,19 @@ ### Return | ||
| <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> | ||
| <!-- prettier-ignore --> | ||
| | [<img src="https://avatars3.githubusercontent.com/u/887639?v=4" width="100px;" alt="Donavon West"/><br /><sub><b>Donavon West</b></sub>](http://donavon.com)<br />[🚇](#infra-donavon "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/donavon/use-event-listener/commits?author=donavon "Tests") [💡](#example-donavon "Examples") [🤔](#ideas-donavon "Ideas, Planning, & Feedback") [🚧](#maintenance-donavon "Maintenance") [👀](#review-donavon "Reviewed Pull Requests") [🔧](#tool-donavon "Tools") [💻](https://github.com/donavon/use-event-listener/commits?author=donavon "Code") | [<img src="https://avatars3.githubusercontent.com/u/8732191?v=4" width="100px;" alt="Kevin Kipp"/><br /><sub><b>Kevin Kipp</b></sub>](https://github.com/third774)<br />[💻](https://github.com/donavon/use-event-listener/commits?author=third774 "Code") | [<img src="https://avatars1.githubusercontent.com/u/1288694?v=4" width="100px;" alt="Justin Hall"/><br /><sub><b>Justin Hall</b></sub>](https://github.com/wKovacs64)<br />[💻](https://github.com/donavon/use-event-listener/commits?author=wKovacs64 "Code") [📖](https://github.com/donavon/use-event-listener/commits?author=wKovacs64 "Documentation") | | ||
| | :---: | :---: | :---: | | ||
| <!-- prettier-ignore-start --> | ||
| <!-- markdownlint-disable --> | ||
| <table> | ||
| <tr> | ||
| <td align="center"><a href="http://donavon.com"><img src="https://avatars3.githubusercontent.com/u/887639?v=4" width="100px;" alt=""/><br /><sub><b>Donavon West</b></sub></a><br /><a href="#infra-donavon" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/donavon/use-event-listener/commits?author=donavon" title="Tests">⚠️</a> <a href="#example-donavon" title="Examples">💡</a> <a href="#ideas-donavon" title="Ideas, Planning, & Feedback">🤔</a> <a href="#maintenance-donavon" title="Maintenance">🚧</a> <a href="https://github.com/donavon/use-event-listener/pulls?q=is%3Apr+reviewed-by%3Adonavon" title="Reviewed Pull Requests">👀</a> <a href="#tool-donavon" title="Tools">🔧</a> <a href="https://github.com/donavon/use-event-listener/commits?author=donavon" title="Code">💻</a></td> | ||
| <td align="center"><a href="https://github.com/third774"><img src="https://avatars3.githubusercontent.com/u/8732191?v=4" width="100px;" alt=""/><br /><sub><b>Kevin Kipp</b></sub></a><br /><a href="https://github.com/donavon/use-event-listener/commits?author=third774" title="Code">💻</a></td> | ||
| <td align="center"><a href="https://github.com/wKovacs64"><img src="https://avatars1.githubusercontent.com/u/1288694?v=4" width="100px;" alt=""/><br /><sub><b>Justin Hall</b></sub></a><br /><a href="https://github.com/donavon/use-event-listener/commits?author=wKovacs64" title="Code">💻</a> <a href="https://github.com/donavon/use-event-listener/commits?author=wKovacs64" title="Documentation">📖</a></td> | ||
| <td align="center"><a href="https://github.com/huan086"><img src="https://avatars2.githubusercontent.com/u/1448788?v=4" width="100px;" alt=""/><br /><sub><b>Jeow Li Huan</b></sub></a><br /><a href="https://github.com/donavon/use-event-listener/pulls?q=is%3Apr+reviewed-by%3Ahuan086" title="Reviewed Pull Requests">👀</a></td> | ||
| <td align="center"><a href="http://normanrz.com/"><img src="https://avatars1.githubusercontent.com/u/335438?v=4" width="100px;" alt=""/><br /><sub><b>Norman Rzepka</b></sub></a><br /><a href="#ideas-normanrz" title="Ideas, Planning, & Feedback">🤔</a></td> | ||
| <td align="center"><a href="https://github.com/bvanderdrift"><img src="https://avatars1.githubusercontent.com/u/6398452?v=4" width="100px;" alt=""/><br /><sub><b>Beer van der Drift</b></sub></a><br /><a href="https://github.com/donavon/use-event-listener/commits?author=bvanderdrift" title="Tests">⚠️</a> <a href="https://github.com/donavon/use-event-listener/commits?author=bvanderdrift" title="Code">💻</a></td> | ||
| </tr> | ||
| </table> | ||
| <!-- markdownlint-enable --> | ||
| <!-- prettier-ignore-end --> | ||
| <!-- ALL-CONTRIBUTORS-LIST:END --> | ||
| This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! |
@@ -1,2 +0,2 @@ | ||
| import { EventHandler, SyntheticEvent } from 'react'; | ||
| type Options = Pick<AddEventListenerOptions, 'capture' | 'passive'> | ||
@@ -6,9 +6,39 @@ /** | ||
| */ | ||
| declare function useEventListener<T extends SyntheticEvent<any>>( | ||
| declare function useEventListener<K extends keyof HTMLElementEventMap>( | ||
| eventName: K, | ||
| handler: HTMLElementEventMap[K], | ||
| // allow null to support usage with `useRef<HTMLElement | null>(null)` | ||
| element: HTMLElement | null, | ||
| options?: Options | ||
| ): void; | ||
| declare function useEventListener<K extends keyof DocumentEventMap>( | ||
| eventName: K, | ||
| handler: DocumentEventMap[K], | ||
| element: Document, | ||
| options?: Options | ||
| ): void; | ||
| declare function useEventListener<K extends keyof WindowEventMap>( | ||
| eventName: K, | ||
| handler: WindowEventMap[K], | ||
| element?: Window, | ||
| options?: Options | ||
| ): void; | ||
| declare function useEventListener( | ||
| eventName: string, | ||
| handler: EventHandler<T>, | ||
| element?: HTMLElement | ||
| handler: EventListenerOrEventListenerObject, | ||
| element?: HTMLElement | Window | Document | null, | ||
| options?: Options | ||
| ): void; | ||
| declare function useEventListener< | ||
| K extends keyof (HTMLElementEventMap & DocumentEventMap & WindowEventMap) | ||
| >( | ||
| eventName: K, | ||
| handler: ( | ||
| event: (HTMLElementEventMap & DocumentEventMap & WindowEventMap)[K] | ||
| ) => void, | ||
| element?: HTMLElement | Document | Window | null, | ||
| options?: Options | ||
| ): void; | ||
| export as namespace useEventListener; | ||
| export default useEventListener; |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 2 instances in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 2 instances in 1 package
Improved metrics
- Total package byte prevSize
- increased by51.35%
13270
- Number of package files
- increased by28.57%
9
- Lines of code
- increased by364.71%
79
- Number of lines in readme file
- increased by11.71%
124
Worsened metrics
- Dev dependency count
- increased by14.29%
16
No dependency changes