react-use/stories/useKeyPressEvent.story.tsx
xobotyi b6993a6f95
feat(prettier): make prettier a part of eslint.
Also reduce max line width to 100. And remove `lint:types` step for
commit sequence, it bothers when committing incomplete (wip) changes.
2021-02-01 18:58:55 +03:00

68 lines
1.9 KiB
TypeScript

import { storiesOf } from '@storybook/react';
import * as React from 'react';
import { useKeyboardJs, useKeyPressEvent } from '../src';
import ShowDocs from './util/ShowDocs';
const Demo = () => {
const [count, setCount] = React.useState(0);
const increment = () => {
console.log('INCREMENT');
setCount((currentCount) => ++currentCount);
};
const decrement = () => {
console.log('DECREMENT');
setCount((currentCount) => --currentCount);
};
const reset = () => setCount(() => 0);
useKeyPressEvent(']', increment);
useKeyPressEvent('[', decrement);
useKeyPressEvent('r', reset);
return (
<div>
<style dangerouslySetInnerHTML={{ __html: `code {color: red}` }} />
<p>
Try pressing <code>[</code>, <code>]</code>, and <code>r</code> to see the count incremented
and decremented.
</p>
<p>Count: {count}</p>
</div>
);
};
const DemoKeyboardJs = () => {
const [count, setCount] = React.useState(0);
const increment = () => {
console.log('INCREMENT');
setCount((currentCount) => ++currentCount);
};
const decrement = () => {
console.log('DECREMENT');
setCount((currentCount) => --currentCount);
};
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 (
<div>
<style dangerouslySetInnerHTML={{ __html: `code {color: red}` }} />
<p>
Try pressing <code>q + [</code>, <code>q + ]</code>, and <code>q + r</code> to see the count
incremented and decremented.
</p>
<p>Count: {count}</p>
</div>
);
};
storiesOf('Sensors/useKeyPressEvent', module)
.add('Docs', () => <ShowDocs md={require('../docs/useKeyPressEvent.md')} />)
.add('Demo', () => <Demo />)
.add('KeyboardJs', () => <DemoKeyboardJs />);