@use-it/event-listener - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

package.json

@@ -6,4 +6,4 @@ {
   },
-  "version": "0.1.1",
-  "description": "A custom React Hook thst provides a useEventListener.",
+  "version": "0.1.2",
+  "description": "A custom React Hook that provides a useEventListener.",
   "main": "dist/event-listener.js",
@@ -16,3 +16,3 @@ "umd:main": "dist/event-listener.umd.js",
     "type": "git",
-    "url": "https://github.com/donavon/event-listener.git"
+    "url": "https://github.com/donavon/use-event-listener.git"
   },
@@ -59,6 +59,6 @@ "scripts": {
       "global": {
-        "branches": 0,
-        "functions": 0,
-        "lines": 0,
-        "statements": 0
+        "branches": 100,
+        "functions": 100,
+        "lines": 100,
+        "statements": 100
       }
@@ -65,0 +65,0 @@ }

README.md

@@ -5,3 +5,3 @@ # @use-it/event-listener
 
-[![npm version](https://badge.fury.io/js/%40use-it%2Fevent-listener.svg)](https://badge.fury.io/js/%40use-it%2Fevent-listener)
+[![npm version](https://badge.fury.io/js/%40use-it%2Fevent-listener.svg)](https://badge.fury.io/js/%40use-it%2Fevent-listener) [![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors)
 
@@ -45,3 +45,3 @@ This hook was inspired by [Dan Abramov](https://github.com/gaearon)'s
 | `handler`   | A function that will be called whenever `eventName` fires on `element`.                                           |
-| `element`\* | An optional element to listen on. Defaults to `global` (i.e., `window`).                                                           |
+| `element`\* | An optional element to listen on. Defaults to `global` (i.e., `window`).                                          |
 
@@ -52,4 +52,62 @@ ### Return
 
+## Example
+
+Let's look at some sample code. Suppose you would like to track the mouse
+position. You _could_ subscribe to mouse move events with like this.
+
+```js
+const useMouseMove = () => {
+  const [coords, setCoords] = useState([0, 0]);
+
+  useEffect(() => {
+    const handler = ({ clientX, clientY }) => {
+      setCoords([clientX, clientY]);
+    };
+    window.addEventListener('mousemove', handler);
+    return () => {
+      window.removeEventListener('mousemove', handler);
+    };
+  }, []);
+
+  return coords;
+};
+```
+
+Here we're using `useEffect` to roll our own handler add/remove event listener.
+
+`useEventListener` abstracts this away. You only need to care about the event name
+and the handler function.
+
+```js
+const useMouseMove = () => {
+  const [coords, setCoords] = useState([0, 0]);
+
+  useEventListener('mousemove', ({ clientX, clientY }) => {
+    setCoords([clientX, clientY]);
+  });
+
+  return coords;
+};
+```
+
+## Live demo
+
+You can view/edit the sample code above on CodeSandbox.
+
+[![Edit demo app on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/k38lyx2q9o)
+
 ## License
 
 **[MIT](LICENSE)** Licensed
+
+## Contributors
+
+Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):
+
+<!-- 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") |
+| :---: | :---: |
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

New alerts

Minified code

Quality

This 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 1 instance in 1 package

Improved metrics

Total package byte prevSize

8028

46.34%

Number of lines in readme file

111

109.43%

Worsened metrics

Number of low quality alerts

5

25%

No dependency changes