Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@reecelucas/react-use-hotkeys
Advanced tools
Changelog
Readme
React hook for creating simple keyboard shortcuts.
npm install @reecelucas/react-use-hotkeys
import useHotkeys from "@reecelucas/react-use-hotkeys";
All hotkey combinations must use valid KeyBoardEvent
"key"
values. A full list can be found on MDN and Wes Bos has created a great interactive lookup.
// Single keys
useHotkeys("Escape", () => {
console.log("Some action");
});
useHotkeys("F7", () => {
console.log("Some action");
});
// Modifier combinations
useHotkeys("Meta+Shift+z", () => {
console.log("Some action");
});
// Key sequences
useHotkeys("w s d", () => {
console.log("Some action");
});
useHotkeys('w " " d', () => {
// space key in sequence (`w ' ' d` also works)
console.log("Some action");
});
// Multiple key combinations mapped to the same callback
useHotkeys(["Control+z", "Meta+z"], () => {
console.log("Some action");
});
useHotkeys(["a", "Meta+z", "w s d"], () => {
console.log("Some action");
});
The following patterns are not supported:
// Modifier keys in sequences
useHotkeys("Control i d", () => {
console.log("I won't run!");
});
// Modifier combinations in sequences
useHotkeys("Control+z i d", () => {
console.log("I won't run!");
});
If you find a use case where the API is too restrictive you can use the escape hatch to perform whatever custom logic you need:
useHotkeys("*", (event) => {
console.log("I will run on every keydown event");
if (customKeyLogic(event)) {
console.log("some action");
}
});
enabled
You can disable the hook by passing enabled: false
. When disabled the hook will stop listening for keydown
events:
useHotkeys(
"Escape",
() => {
console.log("I won't run!");
},
{ enabled: false }
);
enableOnContentEditable
By default, the hook will ignore keydown
events originating from elements with the contenteditable
attribute, since this behaviour is normally what you want. If you want to override this behaviour you can pass enableOnContentEditable: true
:
useHotkeys(
"Escape",
() => {
console.log("Some action");
},
{ enableOnContentEditable: true }
);
ignoredElementWhitelist
By default, the hook will ignore keydown
events originating from INPUT
and TEXTAREA
elements, since this behaviour is normally what you want. If you want to override this behaviour you can use ignoredElementWhitelist
:
useHotkeys(
"Escape",
() => {
console.log("I will now run on input elements");
},
{ ignoredElementWhitelist: ["INPUT"] }
);
useHotkeys(
"Escape",
() => {
console.log("I will now run on input and textarea elements");
},
{ ignoredElementWhitelist: ["INPUT", "TEXTAREA"] }
);
eventListenerOptions
You can pass AddEventListenerOptions
if you need to listen for keydown
events in the capturing phase:
useHotkeys(
"Escape",
() => {
console.log("I will run in the capturing phase");
},
{
eventListenerOptions: {
capture: true,
},
}
);
useHotkeys(
hotkeys: string | string[],
callback: (event: KeyboardEvent) => void,
options?: {
enabled?: boolean;
enableOnContentEditable?: boolean;
ignoredElementWhitelist?: ("INPUT" | "TEXTAREA")[];
eventListenerOptions?: AddEventListenerOptions;
}
) => void;
Tests use Jest and react-testing-library.
git clone git@github.com:reecelucas/react-use-hotkeys.git
cd react-use-hotkeys
yarn
yarn test
FAQs
React hook to create keyboard shortcuts
The npm package @reecelucas/react-use-hotkeys receives a total of 10,520 weekly downloads. As such, @reecelucas/react-use-hotkeys popularity was classified as popular.
We found that @reecelucas/react-use-hotkeys demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.