react-use/stories/useKeyPress.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

33 lines
895 B
TypeScript

import { storiesOf } from '@storybook/react';
import * as React from 'react';
import { useKeyPress } from '../src';
import { CenterStory } from './util/CenterStory';
import ShowDocs from './util/ShowDocs';
const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
const Demo = () => {
const states: boolean[] = [];
for (const key of keys) {
// eslint-disable-next-line react-hooks/rules-of-hooks
states.push(useKeyPress(key)[0]);
}
return (
<CenterStory>
<div style={{ textAlign: 'center' }}>
Try pressing numbers
<br />
{states.reduce(
(s, pressed, index) => s + (pressed ? (s ? ' + ' : '') + keys[index] : ''),
''
)}
</div>
</CenterStory>
);
};
storiesOf('Sensors/useKeyPress', module)
.add('Docs', () => <ShowDocs md={require('../docs/useKeyPress.md')} />)
.add('Demo', () => <Demo />);