diff --git a/docs/useEvent.md b/docs/useEvent.md index 71ffc67740..7cb23700ae 100644 --- a/docs/useEvent.md +++ b/docs/useEvent.md @@ -34,5 +34,5 @@ const Demo = () => { ```js useEvent('keydown', handler) -useEvent('scroll', handler, window, {useCapture: true}) +useEvent('scroll', handler, window, {capture: true}) ``` diff --git a/src/__stories__/useKeyPressEvent.story.tsx b/src/__stories__/useKeyPressEvent.story.tsx index cf415aad9c..4930bf0500 100644 --- a/src/__stories__/useKeyPressEvent.story.tsx +++ b/src/__stories__/useKeyPressEvent.story.tsx @@ -1,6 +1,6 @@ import { storiesOf } from "@storybook/react"; import * as React from "react"; -import { useKeyPressEvent } from ".."; +import { useKeyPressEvent, useKeyboardJs } from ".."; import ShowDocs from "../util/ShowDocs"; const Demo = () => { @@ -31,6 +31,35 @@ const Demo = () => { ); }; +const DemoKeyboardJs = () => { + const [count, setCount] = React.useState(0); + + const increment = () => { + console.log('INCREMENT'); + setCount(count => ++count); + }; + const decrement = () => { + console.log('DECREMENT'); + setCount(count => --count); + }; + const reset = () => setCount(() => 0); + + useKeyPressEvent('q + ]', increment, increment, useKeyboardJs as any); + useKeyPressEvent('q + [', decrement, decrement, useKeyboardJs as any); + useKeyPressEvent('q + r', reset, null, useKeyboardJs as any); + + return ( +
+ Try pressing q + [
, q + ]
, and q + r
to
+ see the count incremented and decremented.
Count: {count}
+