feat: 🎸 add createRenderProp function for creating render-props

Author: streamich

docs/useKey.md

@@ -20,6 +20,14 @@ const Demo = () => {
 };
 ```
 
+Or as render-prop:
+
+```jsx
+import UseKey from 'react-use/lib/comps/UseKey';
+
+<UseKey filter='a' fn={() => alert('"a" key pressed!')} />
+```
+
 
 ## Reference
 

src/comps/UseKey.tsx

@@ -0,0 +1,6 @@
+import createRenderProp from '../util/createRenderProp';
+import useKey from '../useKey';
+
+const UseKey = createRenderProp(useKey, ({filter, fn, deps, ...rest}) => [filter, fn, rest, deps]);
+
+export default UseKey;

src/comps/__stories__/UseKey.story.tsx

@@ -0,0 +1,11 @@
+import {storiesOf} from '@storybook/react';
+import * as React from 'react';
+import UseKey from '../UseKey';
+
+storiesOf('Components|<UseKey>', module)
+  .add('Demo', () =>
+    <div>
+      Press "q" key!
+      <UseKey filter='q' fn={() => alert('Q pressed!')} />
+    </div>
+  )

src/util/createRenderProp.ts

@@ -0,0 +1,13 @@
+const defaultMapPropsToArgs = props => [props];
+
+const createRenderProp = (hook, mapPropsToArgs = defaultMapPropsToArgs) => {
+  const RenderProp = (props) => {
+    const state = hook(...mapPropsToArgs(props));
+    const {children, render = children} = props;
+    return render ? render(state) || null : null;
+  };
+
+  return RenderProp;
+};
+
+export default createRenderProp;