Add use event listener (#13)

* Add useEventListener hook, documentation, and a working example
* major update of dependencies to resolve npm audit warnings
* Bump version 0.4.0

.gitignore

@@ -8,3 +8,4 @@ node_modules
 .rts2_cache_system
 dist
 .idea
+example/.parcel-cache

README.md

@@ -1,6 +1,8 @@
 calvium-hooks-web - Reusable Hooks for React JS Web Development
 =========
 
+![Screenshot](./screenshot.png)
+
 useDimensions
 ----
 
@@ -61,3 +63,35 @@ const Component = () => {
  return null
 } 
 ```
+
+useEventListener
+---
+
+This hook runs a handler function on the given DOM event.
+It handles checking if addEventListener is supported, adding the event listener, and removal on cleanup.
+
+Source: https://usehooks.com/useEventListener/
+
+```typescript
+// Usage
+function App() {
+  // State for storing mouse coordinates
+  const [coords, setCoords] = useState({ x: 0, y: 0 });
+  // Event handler utilizing useCallback ...
+  // ... so that reference never changes.
+  const handler = useCallback(
+    ({ clientX, clientY }) => {
+      // Update coordinates
+      setCoords({ x: clientX, y: clientY });
+    },
+    [setCoords]
+  );
+  // Add event listener using our hook
+  useEventListener("mousemove", handler);
+  return (
+    <h1>
+      The mouse position is ({coords.x}, {coords.y})
+    </h1>
+  );
+}
+```

example/index.tsx

@@ -1,10 +1,76 @@
 import 'react-app-polyfill/ie11';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import {
+  useMousePosition,
+  useEventListener,
+  useLocalStorage,
+  useDimensions,
+} from '../.';
+import { useCallback, useState } from 'react';
 
 const App = () => {
+  const [value, setValue] = useLocalStorage('my-value', 0);
+
+  const { x, y } = useMousePosition();
+
+  const [windowSize, setWindowSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+  const handleResize = useCallback((e: Event) => {
+    setWindowSize({ width: window.innerWidth, height: window.innerHeight });
+  }, []);
+  useEventListener('resize', handleResize);
+
+  const { dimensions, measureRef } = useDimensions({ liveMeasure: true });
+
   return (
     <div>
+      <h1>useLocalStorage</h1>
+
+      <button onClick={() => setValue(v => v + 1)}>
+        Increment Local Storage Value
+      </button>
+      <button onClick={() => setValue(0)}>Reset</button>
+      <h2>{value}</h2>
+      <hr />
+
+      <h1>useMousePosition</h1>
+
+      <h2>
+        {x ?? 'N/A'}x{y ?? 'N/A'}
+      </h2>
+
+      <hr />
+
+      <h1>useEventListener (resize)</h1>
+
+      <h2>
+        {windowSize.width ?? 'N/A'}x{windowSize.height ?? 'N/A'}
+      </h2>
+
+      <hr />
+
+      <h1>useDimensions</h1>
+      <div
+        ref={measureRef}
+        style={{
+          backgroundColor: 'orange',
+          height: '20vh',
+          width: '80vw',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {!!dimensions && (
+          <h2>
+            {Math.floor(dimensions.width)}x{Math.floor(dimensions.height)}
+          </h2>
+        )}
+      </div>
     </div>
   );
 };