diff --git a/README.md b/README.md index cf632c61..d4821508 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,7 @@ - [`useHover` and `useHoverDirty`](./docs/useHover.md) — tracks mouse hover state of some element. [![][img-demo]](https://codesandbox.io/s/zpn583rvx) - [`useIdle`](./docs/useIdle.md) — tracks whether user is being inactive. - [`useKeyPress`](./docs/useKeyPress.md) — tracks whether a keyboard key—or set of keys—was pressed. + - [`useKeyPressEvent`](./docs/useKeyPressEvent.md) — call `onKeyDown` and `onKeyUp` callbacks, whe key pressed. - [`useLocation`](./docs/useLocation.md) — tracks page navigation bar location state. - [`useMedia`](./docs/useMedia.md) — tracks state of a CSS media query. - [`useMediaDevices`](./docs/useMediaDevices.md) — tracks state of connected hardware devices. diff --git a/docs/useKeyPressEvent.md b/docs/useKeyPressEvent.md index 29257394..930f3174 100644 --- a/docs/useKeyPressEvent.md +++ b/docs/useKeyPressEvent.md @@ -23,26 +23,20 @@ import { useKeyPressEvent } from "react-use"; const Demo = () => { const [count, setCount] = useState(0); - const onKeyup = keys => { - console.log(`onKeyup: ${keys}`); - }; + const increment = () => setCount(count => ++count); + const decrement = () => setCount(count => --count); + const reset = () => setCount(count => 0); - const onKeydown = keys => { - console.log(`onKeydown: ${keys}`); - setCount(count => ++count); - }; - - useKeyPressEvent('h', onKeyup, onKeydown); - - useKeyPressEvent('l', () => { - console.log(`onKeydown for 'l'`); - setCount(count => ++count); - }); + useKeyPressEvent(']', increment, increment); + useKeyPressEvent('[', decrement, decrement); + useKeyPressEvent('r', reset); return (
-

Try pressing h or l to see the count increment

-

Count: {countOfPressed}

+

+ Try pressing [, ], and r to + see the count incremented and decremented.

+

Count: {count}

); }; @@ -52,6 +46,5 @@ const Demo = () => { ```js useKeyPressEvent('', onKeydown); - useKeyPressEvent('', onKeyup, onKeydown); ``` diff --git a/src/__stories__/useKeyPressEvent.story.tsx b/src/__stories__/useKeyPressEvent.story.tsx new file mode 100644 index 00000000..045a1464 --- /dev/null +++ b/src/__stories__/useKeyPressEvent.story.tsx @@ -0,0 +1,30 @@ +import { storiesOf } from "@storybook/react"; +import * as React from "react"; +import { useKeyPressEvent } from ".."; +import ShowDocs from "../util/ShowDocs"; + +const Demo = () => { + const [count, setCount] = React.useState(0); + + const increment = () => setCount(count => ++count); + const decrement = () => setCount(count => --count); + const reset = () => setCount(count => 0); + + useKeyPressEvent(']', increment, increment); + useKeyPressEvent('[', decrement, decrement); + useKeyPressEvent('r', reset); + + return ( +
+