Keyboard Shortcuts UI (cmd+k) For The Web – Ninja Keys

Category: Javascript , Recommended | July 2, 2022
Author:ssleptsov
Views Total:228 views
Official Page:Go to website
Last Update:July 2, 2022
License:MIT

Preview:

Keyboard Shortcuts UI (cmd+k) For The Web – Ninja Keys

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

You Might Be Interested In:


Leave a Reply