Hotkeys with Effector made easy
npm install effector-hotkeyHotkeys with Effector made easy
- Easy-to-use, no need to implement by yourself
- Supports both Windows/MacOS style hotkeys
- Doesn't break if using with SSR
``bash`
npm i effector-hotkey
`tsx
import { hotkey } from 'effector-hotkey';
const copyPressed = hotkey({ key: 'Ctrl+C' });
sample({
clock: copyPressed,
source: $formData,
target: saveFx,
});
`
#### Specifying event type
`tsx
import { hotkey } from 'effector-hotkey';
const spaceDown = hotkey({ key: 'Space', type: 'keydown' });
const spaceUp = hotkey({ key: 'Space', type: 'keyup' });
const spacePress = hotkey({ key: 'Space', type: 'keypress' });
`
#### Shortcut
`tsx
import { hotkey } from 'effector-hotkey';
const copyPressed = hotkey('Ctrl+C');
const spaceDown = hotkey('Space', 'keydown');
`
#### filter prop
`tsx
import { hotkey } from 'effector-hotkey';
import { createStore } from 'effector';
const $isConfirmModalOpened = createStore(true);
hotkey({
key: 'Y',
filter: $isConfirmModalOpened,
target: removeFx,
});
hotkey({
key: 'N',
filter: $isConfirmModalOpened,
target: closeModal,
});
`
#### target prop
If you want to just trigger something instead of listening to event, you can use target prop:
`tsx
import { sample } from 'effector';
import { hotkey } from 'effector-hotkey';
hotkey({
key: 'Ctrl+C',
target: copyTextFx,
});
// <=>
sample({
clock: hotkey('Ctrl+C'),
target: copyTextFx,
});
`
#### keyup, keydown, keypress events
You can use internal wrappers for native events as well
`tsx
import { keyup, keydown, keypress } from 'effector-hotkey';
keyup.watch(console.log); // KeyboardEvent
`
#### $isShiftDown, $isCtrlDown, $isAltDown
You can also use pre-made stores to track if Shift/Ctrl/Alt buttons are held
Simple use-case: display hotkeys in UI while holding Ctrl
`tsx
import { useStore } from 'effector-react';
import { hotkey, $isCtrlDown } from 'effector-hotkey';
const SubmitButton = () => {
const isCtrlDown = useStore($isCtrlDown);
return (
);
};
const savePressed = createEvent
sample({
clock: [savePressed, hotkey('Ctrl+S')],
target: saveFx,
});
``