How do I unbind a shortcut in Mousetrap?

Use the unbind method, e.g., Mousetrap.unbind('key') to remove a binding. For sequences or combinations, specify the exact string. Refer to the external documentation for detailed examples.

Does Mousetrap work with React or Vue.js?

Yes, but it requires manual integration. You need to bind and unbind shortcuts in lifecycle hooks like useEffect or mounted/unmounted to avoid memory leaks, as Mousetrap is vanilla JS.

How to handle modifier keys in key sequences with Mousetrap?

Mousetrap primarily handles modifiers in combinations like Ctrl+S, but for sequences with modifiers, bind them as separate combinations. Check the docs for workarounds on complex bindings.

Mousetrap vs Hotkeys.js: which should I use?

Mousetrap is lighter with no dependencies and better for simple, cross-browser shortcuts. Hotkeys.js might offer more features like better framework integration, so choose based on your project's complexity.

Can I use Mousetrap for gaming on a website?

Yes, it supports keydown and keyup events for real-time input. However, for high-performance games, test event timing as Mousetrap isn't optimized for low-latency gaming scenarios.

How to test Mousetrap shortcuts in different browsers?

Use the included unit tests by opening tests/mousetrap.html in browsers or running npm test with Node.js. This verifies compatibility across IE6+, Safari, Firefox, and Chrome.

Open-Awesome

mousetrap

Apache-2.0JavaScript1.6.5

A lightweight, dependency-free JavaScript library for handling keyboard shortcuts, key combinations, and sequences.

Visit Website GitHub

11.8k stars955 forks0 contributors

What is mousetrap?

Mousetrap is a lightweight JavaScript library designed to handle keyboard shortcuts, key combinations, and sequences in web applications. It solves the problem of adding keyboard navigation and shortcut functionality without complex dependencies or browser compatibility issues. The library is minimal, fast, and works across all major browsers, including older versions like IE6.

Target Audience

Frontend developers and web application builders who need to implement keyboard shortcuts, hotkeys, or accessibility features in their projects.

Value Proposition

Developers choose Mousetrap for its simplicity, zero dependencies, and robust support for key events, sequences, and international keyboards—all in a tiny package under 5kb minified.

Overview

Simple library for handling keyboard shortcuts in Javascript

Use Cases

Best For

Adding keyboard shortcuts to web applications like dashboards or tools
Implementing Gmail-style key sequences for navigation
Creating accessible web apps with keyboard-only controls
Building cross-browser compatible hotkey systems
Adding cheat codes or Easter eggs (like Konami code) to websites
Handling complex key combinations without external libraries

Not Ideal For

Projects built with modern reactive frameworks like React or Vue that require declarative, component-integrated shortcut handling
Applications needing dynamic, context-aware shortcuts that change based on UI state or user permissions
Teams looking for built-in UI components or configuration panels to manage or display shortcuts to users

Pros & Cons

Pros

Zero Dependencies

Works standalone without any external frameworks, as emphasized in the README's key features, making it easy to integrate into any project without bloat.

Flexible Event Handling

Supports keypress, keydown, and keyup events for precise control, with examples in the getting started section showing how to bind events like 'esc' with 'keyup'.

International Keyboard Support

Compatible with various international layouts, ensuring shortcuts work consistently across different regions, a highlighted feature in the documentation.

Key Sequence Binding

Enables Gmail-style multi-key sequences like 'g i' for navigation, demonstrated in the examples, allowing for complex shortcut workflows.

Cons

Limited Advanced Features

Lacks built-in support for handling shortcut conflicts, priority management, or state-dependent bindings, requiring manual implementation for complex use cases.

Manual Binding Management

Requires explicit binding and unbinding calls, which can be error-prone in dynamic applications with frequent UI changes, as there's no automatic cleanup.

External Documentation

Full documentation is hosted off-site at craig.is, which may be less convenient and up-to-date compared to integrated or community-maintained docs.

Frequently Asked Questions

Related Projects

keymaster

A simple micro-library for defining and dispatching keyboard shortcuts. It has no dependencies.

Stars6,515

Forks467

Last commit2 years ago

Keypress

A keyboard input capturing utility in which any key can be a modifier key.

Stars3,154

Forks307

Last commit5 years ago

jquery.hotkeys

jQuery Hotkeys lets you watch for keyboard events anywhere in your code supporting almost any key combination.

Stars2,554

Forks457

Last commit4 years ago

KeyboardJS

A JavaScript library for binding keyboard combos without the pain of key codes and key combo conflicts.

Stars2,106

Forks221

Last commit3 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub