npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

hotkeypad

v0.1.1

Published

HotKeyPad: A simple and beautiful command keyboard shortcut for your web app.

Downloads

1,023

Readme

HotKeyPad

HotKeypad is a lightweight package that provides you with a keyboard shortcuts interface for your website. Built with vanilla JS, no external dependencies. Inspired in design and functionality by NinjaKeys.

npm npm

Demo

Demo

Motivation

There are lots of libraries that provide keyboard shortcuts for web apps, but most of them are somewhat heavy and depend on extra dependencies. I wanted to create a simple and lightweight package that provided this functionality without any dependencies and made with vanilla JS, so it could be integrated into any web project.

Installation

You can install hotkeypad via npm, pnpm or yarn. Here's how you can do it with npm:

npm install hotkeypad

Usage

To use HotKeyPad, you need to import the package and create a new instance of the HotKeyPad class. You can then add commands to the keypad and display it on your web app.

First, add thee following tag to your page:

<div id="hotkeypad"></div>

Then, you can use the following code to add the keypad to your page:

import HotKeyPad from 'hotkeypad'

const hotkeypad = new HotKeyPad()

// This will set the commands and render the keypad automatically
hotkeypad.setCommands([
  {
    section: "Actions",
    id: "print",
    title: "Print Page",
    icon: `#custom-icon-print#`, // You can insert your own icon here, being and svg, image or font icon
    hotkey: `${hotKeyPad.activationKey} + P`, // You can use the default activation key or set your own
    handler: () => {
      window.print()
    }
  },
])

// You can also add a listener to the open and close events
window.addEventListener('hotkeypad:open', () => {
  console.log('HotKeyPad is open')
})

window.addEventListener('hotkeypad:close', () => {
  console.log('HotKeyPad is closed')
})

The default activation key is Ctrl for Windows/Linux and Cmd for Mac.

Features

  • Keyboard navigation
  • Customizable commands
  • Light and dark mode support
  • Customizable colors with CSS variables
  • Customizable activation key

Attributes

You can pass the following attributes to the HotKeyPad constructor or to the html tag (data- prefix is required with kebab-case for the attribute name).

| Field | Default | Description | |-------------|----------------|---------------------------------------------------------| | placeholder | Search command | Placeholder text for the search input. | | activationLetter | K | The activation letter for the commands. Default is K. | | closeKey | Escape | The key to close the keypad. Default is Escape. |

Commands Format

Array of HotKeyPadData that represent the commands that will be displayed on the keypad.

| Field | Type | Description | |-----------|----------|-----------------------------------------------------------------------------| | id | string | The unique identifier of the command. | | title | string | The title of the command. | | hotkey | string | The hotkey combination for the command. Format: {ActivationKey}+{Letter} | | handler | Function | The function to be executed when the command is triggered. | | icon | string (optional) | The icon of the command. | | section | string (optional) | The section of the command. Allows you to group commands. |

Methods

setCommands(commands: HotKeyPadData[]): void

Set the commands that will be displayed on the keypad.

open(): void

Open the keypad.

close(): void

Close the keypad.

Events

hotkeypad:open

Fired when the keypad is opened.

hotkeypad:close

Fired when the keypad is closed.

CSS Variables

You can customize the colors of the keypad by changing the CSS variables. Here are the available variables:

--hotkeypad-bg-kbd: #f9fafb;
--hotkeypad-bg-backdrop: #fff;
--hotkeypad-bg-container: #fff;
--hotkeypad-bg-item-hover: #f3f4f6;
--hotkeypad-border-container: #d1d5db;
--hotkeypad-border-container-hover: #9ca3af;
--hotkeypad-fg-muted: #4b5563;

Example:

#hotkeypad {
  --hotkeypad-bg-container: red;
}

CSS HotKeyPad Parts

Allowing you to style specific elements from your style.

#hotkeypad [data-backdrop] {}
#hotkeypad [data-container] {}
#hotkeypad [data-sections] {}
#hotkeypad [data-section] {}
#hotkeypad [data-hotkey] {}
#hotkeypad [data-hotkey][data-active] {}

Icons

You can use any icon library or custom icons. You can use the icon field to set the icon of the command. You can use an image, svg or font icon:

  • <svg ...><path d="..." /></svg>
  • <img src="path/to/image.png" alt="Title" />
  • <i class="material-icons">print</i>

By default will use the Simple Icons library as this: <img src="https://cdn.simpleicons.org/{icon}" alt="{title}" /> if you pass a normal name instead of the any previous mentioned tags.

License

Copyright (c) Jesus Borrero.

Licensed under the MIT License