reaviz / Reakeys
Licence: apache-2.0
⌨️ React Hotkeys Hook
Stars: ✭ 28
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Reakeys
react-use-hotkeys
React hook for creating simple keyboard shortcuts
Stars: ✭ 74 (+164.29%)
Mutual labels: hotkeys
Redshift-Tray
A no-frills GUI for the excellent Redshift, with some optional OS hotkeys
Stars: ✭ 34 (+21.43%)
Mutual labels: hotkeys
Wubi Lex
WIN10系统自带五笔的码表与短语词库安装、管理工具( 可将五笔替换为郑码等其他形码输入法 ),并可增强微软五笔的设置、热键等功能。 发布后的软件仅890KB, 只要一个EXE文件( 绿色免安装 )。软件已自带五笔86、98、091、新世纪码表,以及极点五笔、QQ五笔、 微软五笔默认词库、昱琼词库、海峰词库等。甚至自带了郑码大词库、可以一键把微软五笔替换为郑码输入法。
Stars: ✭ 385 (+1275%)
Mutual labels: hotkeys
Asuite
ASuite is a simple open source portable launcher for Microsoft Windows.
Stars: ✭ 58 (+107.14%)
Mutual labels: hotkeys
react-hotkey-tooltip
A global Hotkey provider with built in tooltip for React
Stars: ✭ 34 (+21.43%)
Mutual labels: hotkeys
Hotkeys
➷ A robust Javascript library for capturing keyboard input. It has no dependencies.
Stars: ✭ 5,165 (+18346.43%)
Mutual labels: hotkeys
OBS-ChatSpam
Python script for OBS Studio that posts messages in Twitch chat
Stars: ✭ 26 (-7.14%)
Mutual labels: hotkeys
g910-gkey-macro-support
GKey support for Logitech G910 Keyboard on Linux
Stars: ✭ 85 (+203.57%)
Mutual labels: hotkeys
pingmote
Cross-platform Python global emote picker to quickly insert custom images/gifs
Stars: ✭ 24 (-14.29%)
Mutual labels: hotkeys
React Hotkeys
React component to listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts.
Stars: ✭ 279 (+896.43%)
Mutual labels: hotkeys
webplayer-hotkeys
A Chrome extension that assigns hotkeys to play/pause, and switch musics (next and previous). Works with Spotify, Deezer, SoundCloud and Youtube
Stars: ✭ 16 (-42.86%)
Mutual labels: hotkeys
Poe Trades Companion
Enhance your trading experience in Path of Exile. Highly customizable.
Stars: ✭ 395 (+1310.71%)
Mutual labels: hotkeys
Volumey
Volume mixer that allows you to set up global hotkeys to control your Windows audio system.
Stars: ✭ 139 (+396.43%)
Mutual labels: hotkeys
react-keyboard-shortcuts
A declarative library for handling hotkeys based on explicit priority in React applications
Stars: ✭ 23 (-17.86%)
Mutual labels: hotkeys
Hd To Tc
This tool will convert Age of Empires II HD to The Conquerors and create a seperate installation folder. You can also auto configure Voobly to start playing multiplayer instantly.
Stars: ✭ 13 (-53.57%)
Mutual labels: hotkeys
Autohotkey l
AutoHotkey - macro-creation and automation-oriented scripting utility for Windows.
Stars: ✭ 5,090 (+18078.57%)
Mutual labels: hotkeys
Zvirtualdesktop
Windows 10 Virtual Desktop Hotkeys, System Tray Icon, Wallpapers, and Task View replacement
Stars: ✭ 322 (+1050%)
Mutual labels: hotkeys
⌨️ reakeys
React Hook for Mousetrap Hotkeys
🚀 Quick Links
- Checkout the demos
📦 Usage
Install via NPM:
yarn add reakeys
Then in your component, just add the useHotkeys
hook
and specify your keys like:
import React, { FC } from 'react';
import { useHotkeys } from 'reakeys';
export const YourComponent: FC = () => {
useHotkeys([
{
name: 'Dashboard',
keys: 'mod+shift+d',
category: 'Navigation',
callback: event => {
event.preventDefault();
history.push('/dashboard');
}
}
]);
};
Below are the options you can set in the hook array:
type HotkeyShortcuts = {
name: string;
category?: string;
description?: string;
keys: string | string[];
ref?: any;
hidden?: boolean;
callback: (e: ExtendedKeyboardEvent, combo: string) => void;
}
You can also get all the hotkeys that registered by just calling
the useHotkeys
hook and it will return the current hotkeys.
const hotkeys = useHotkeys();
This is useful for creating a dialog to present the user with all the options. Below is an example of how to make a dialog using realayers:
import React, { useState, FC, useCallback } from 'react';
import { Dialog } from 'shared/Dialog';
import { useHotkeys } from 'reakeys';
import groupBy from 'lodash/groupBy';
import sortBy from 'lodash/sortBy';
const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
export const HotkeyCombos: FC = () => {
const hotkeys = useHotkeys();
const categories = groupBy(hotkeys, 'category');
const sorted = Object.keys(categories).reduce((prev, cur) => {
const category = sortBy(categories[cur], 'name');
const label = cur === 'undefined' ? 'General' : cur;
return {
...prev,
[label]: category.filter(k => !k.hidden)
};
}, {});
const { General, ...rest } = sorted as any;
const others = sortBy(Object.keys(rest || {}));
const renderKeyCode = useCallback(keyCode => {
const wrapped = Array.isArray(keyCode) ? keyCode : [keyCode];
const formatted = wrapped.map(k => k.replace('mod', isMac ? '⌘' : 'CTRL'));
return (
<div className={css.keyComboContainer}>
{formatted.map((k, i) => (
<kbd key={i} className={css.keyCombo}>
{k}
</kbd>
))}
</div>
);
}, []);
const renderGroups = useCallback(
group => {
if (!sorted[group]) {
return null;
}
return (
<div key={group}>
<h3>{group}</h3>
<ul className={css.list}>
{sorted[group].map(kk => (
<li key={kk.name} className={css.listItem}>
<label>{kk.name}</label>
{renderKeyCode(kk.keys)}
{kk.description && <p>{kk.description}</p>}
</li>
))}
</ul>
</div>
);
},
[renderKeyCode, sorted]
);
return (
<div className={css.groups}>
{renderGroups('General')}
{others.map(renderGroups)}
</div>
);
};
export const HotkeyDialog: FC = () => {
const [visible, setVisible] = useState<boolean>(false);
useHotkeys([
{
name: 'Hotkey Dialog',
keys: 'SHIFT+?',
hidden: true,
callback: () => setVisible(true)
}
]);
return (
<Dialog
size="800px"
header="Hotkeys"
open={visible}
onClose={() => setVisible(false)}
>
{() => <HotkeyCombos />}
</Dialog>
);
};
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].