@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

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

8028

increased by46.34%

Number of lines in readme file

111

increased by109.43%

No dependency changes