feat: 🎸 add useEvent hook

README.md

@@ -83,6 +83,7 @@
     <br/>
     <br/>
 - [**Lifecycles**](./docs/Lifecycles.md)
+  - [`useEvent`](./docs/useEvent.md) &mdash; subscribe to events.
   - [`useLifecycles`](./docs/useLifecycles.md) &mdash; calls `mount` and `unmount` callbacks.
   - [`useRefMounted`](./docs/useRefMounted.md) &mdash; tracks if component is mounted.
   - [`usePromise`](./docs/usePromise.md) &mdash; resolves promise only while component is mounted.

docs/useEvent.md

@@ -0,0 +1,38 @@
+# `useEvent`
+
+React sensor hook that subscribes a `handler` to events.
+
+
+## Usage
+
+```jsx
+import useEvent from 'react-use/lib/useEvent';
+import useList from 'react-use/lib/useList';
+
+const Demo = () => {
+  const [list, {push}] = useList();
+  const onkeydown = ({key}) => {
+    push(key);
+  };
+  useEvent('keydown', useCallback(onkeydown, []));
+
+  return (
+    <div>
+      <p>
+        Press some keys on your keyboard.
+      </p>
+      <pre>
+        {JSON.stringify(list, null, 4)}
+      </pre>
+    </div>
+  );
+};
+```
+
+
+## Examples
+
+```js
+useEvent('keydown', handler)
+useEvent('scroll', handler, window, {useCapture: true})
+```

src/__stories__/useEvent.story.tsx

@@ -0,0 +1,33 @@
+import {storiesOf} from '@storybook/react';
+import * as React from 'react';
+import {useEvent, useList} from '..';
+import ShowDocs from '../util/ShowDocs';
+import {CenterStory} from './util/CenterStory';
+
+const {useCallback} = React;
+
+const Demo = () => {
+  const [list, {push, clear}] = useList();
+
+  useEvent('keydown', useCallback(({key}) => {
+    if (key === 'r') clear();
+    push(key);
+  }, []));
+
+  return (
+    <CenterStory>
+      <p>
+        Press some keys on your keyboard, <code style={{color: 'tomato'}}>r</code> key resets the list
+      </p>
+      <pre>
+        {JSON.stringify(list, null, 4)}
+      </pre>
+    </CenterStory>
+  );
+};
+
+storiesOf('Sensors|useEvent', module)
+  .add('Docs', () => <ShowDocs md={require('../../docs/useFavicon.md')} />)
+  .add('Demo', () =>
+    <Demo />
+  )

src/__stories__/util/CenterStory.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+export const CenterStory = ({children}) => (
+  <div
+    style={{
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      maxWidth: '400px',
+      margin: '40px auto',
+    }}
+  >
+    <div style={{width: '100%'}}>{children}</div>
+  </div>
+);

src/index.ts

@@ -9,6 +9,7 @@ import useDropArea from './useDropArea';
 import useCounter from './useCounter';
 import useCss from './useCss';
 import useDebounce from './useDebounce';
+import useEvent from './useEvent';
 import useFavicon from './useFavicon';
 import useGeolocation from './useGeolocation';
 import useGetSet from './useGetSet';
@@ -73,6 +74,7 @@ export {
   useCounter,
   useCss,
   useDebounce,
+  useEvent,
   useFavicon,
   useGeolocation,
   useGetSet,

src/useEvent.ts

@@ -0,0 +1,29 @@
+import {useEffect} from 'react';
+
+export interface ListenerType1 {
+  addEventListener (name: string, handler: (event?: any) => void, ...args: any[]);
+  removeEventListener (name: string, handler: (event?: any) => void);
+}
+
+export interface ListenerType2 {
+  on (name: string, handler: (event?: any) => void, ...args: any[]);
+  off (name: string, handler: (event?: any) => void);
+}
+
+export type UseEventTarget = ListenerType1 | ListenerType2;
+
+const defaultTarget = typeof window === 'object' ? window : null;
+
+const useEvent = (name: string, handler?: null | undefined | ((event?: any) => void), target: null | UseEventTarget = defaultTarget, options?: any) => {
+  useEffect(() => {
+    console.log('adding event...');
+    if (!handler) return;
+    if (!target) return;
+    ((target as ListenerType1).addEventListener || (target as ListenerType2).on).call(target, name, handler, options);
+    return () => {
+      ((target as ListenerType1).removeEventListener || (target as ListenerType2).off).call(target, name, handler, options);
+    };
+  }, [name, handler, target, JSON.stringify(options)]);
+};
+
+export default useEvent;