mirror of
https://github.com/streamich/react-use.git
synced 2026-02-01 14:37:31 +00:00
Also reduce max line width to 100. And remove `lint:types` step for commit sequence, it bothers when committing incomplete (wip) changes.
68 lines
1.9 KiB
TypeScript
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 />);
|