https://github.com/Kelin2025/effector-hotkey

Hotkeys with Effector made easy
https://github.com/Kelin2025/effector-hotkey

Last synced: about 2 months ago
JSON representation

Hotkeys with Effector made easy

• Host: GitHub
• URL: https://github.com/Kelin2025/effector-hotkey
• Owner: Kelin2025
• Created: 2022-03-29T22:10:25.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-02-19T14:35:11.000Z (10 months ago)
• Last Synced: 2024-10-27T11:23:28.312Z (about 2 months ago)
• Language: TypeScript
• Size: 626 KB
• Stars: 38
• Watchers: 2
• Forks: 5
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome - effector-hotkey - Hotkeys with Effector made easy. (Packages)

README

        
# Effector-hotkey

Hotkeys 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

## Installation

```bash

npm i effector-hotkey

```

## Usage

```tsx

import { hotkey } from 'effector-hotkey';

const copyPressed = hotkey({ key: 'Ctrl+C' });

sample({

  clock: copyPressed,

  source: $formData,

  target: saveFx,

});

```

## Customization

#### 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,

});

```

## Extra

#### `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 (

    {isCtrlDown ? 'Ctrl+S' : 'Save'}

  );

};

const savePressed = createEvent();

sample({

  clock: [savePressed, hotkey('Ctrl+S')],

  target: saveFx,

});

```