Author: | ssleptsov |
---|---|
Views Total: | 302 views |
Official Page: | Go to website |
Last Update: | July 2, 2022 |
License: | MIT |
Preview:

Description:
Ninja Keys is a JavaScript library that adds ⌘+k (ctrl+k on Windows) search UI containing custom hotkeys to your web app.
Works with Vanilla JS or popular JavaScript frameworks like Vue and React.
How to use it:
1. Install and import the Ninja Keys.
# NPM $ npm i ninja-keys
import 'ninja-keys';
// or <script type="module" src="https://unpkg.com/ninja-keys?module"></script>
2. Add the <ninja-keys> custom element to the page. All possible attributes:
- placeholder: “Type a command or search”
- disableHotkeys: “false”
- hideBreadcrumbs: “false”
- openHotkey: “cmd+k,ctrl+k”
- navigationUpHotkey: “up,shift+tab”
- navigationDownHotkey: “down,tab”
- closeHotkey: “esc”
- goBackHotkey: “backspace”
- selectHotkey: “enter”
- hotKeysJoinedView: “false”
- noAutoLoadMdIcons: “false”
<ninja-keys placeholder="Custom Placeholder"></ninja-keys>
3. Define your own hotkeys.
const hotkeys = [ { id: "myHotkey-1", title: "Hot Key 01", hotkey: "cmd+h", icon: "custom icon html here", mdIcon: "home", // Material Icon keywords: "home", // keyword handler: () => { console.log("navigation to home"); } }, { id: "Theme", title: "Change theme...", mdIcon: "desktop_windows", children: [ { id: "Light Theme", title: "Change theme to Light", mdIcon: "light_mode", handler: () => { console.log("theme light"); } }, { id: "Dark Theme", title: "Change theme to Dark", mdIcon: "dark_mode", keywords: "lol", handler: () => { console.log("theme dark"); } } ] } ];
4. Initialize the cmd+k search UI.
const ninja = document.querySelector("ninja-keys"); ninja.data = hotkeys;
5. Open the interface manually.
ninja.open(); // or ninja.open({ parent: 'Theme' })
6. Change the theme to ‘Dark’.
<ninja-keys class="dark"></ninja-keys>
7. Add a footer to the interface.
<ninja-keys> <slot name="footer">Must custom footer</slot> </ninja-keys>
Changelog:
v1.2.2 (07/02/2022)
- rendering for multiple key options
v1.2.0 (04/21/2022)
- Clean up hotkeys on disconnect
- Export css variable of content zIndex
01/17/2022
- Adds -webkit-backdrop-filter property for Safari
01/08/2022
- Fixed for vue2 observer issue
12/11/2021
- add placeholder text color variable and style customize for input element