key-down (1.0.1)

Published 2026-05-30 15:20:43 +00:00 by melanie in melanie/key-down

Setup this registry in your project .npmrc file:

registry=

To install the package using npm, run the following command:

npm install key-down@1.0.1

or add it to the package.json file:

"key-down": "1.0.1"

For more information on the npm registry, see the documentation.

key-down

A web component for quick key commands

Install

npm install --save @zicklepop/key-down

Resources

Properties

data-key string, required: The key we are watching to be pressed
data-action enum, optional: Defaults to 'click', but can be set to be 'focus'
data-scroll boolean, optional: If true, the page will scroll the wrapped element in to view
data-altKey boolean, optional: Setting this as true or false will require the alt/option key to be pressed or not, otherwise it will not matter.
data-ctrlKey boolean, optional: Setting this as true or false will require the control key to be pressed or not, otherwise it will not matter.
data-metaKey boolean, optional: Setting this as true or false will require the meta/Windows/command key to be pressed or not, otherwise it will not matter.
data-shiftKey boolean, optional: Setting this as true or false will require the shift key to be pressed or not, otherwise it will not matter. If you just want to monitor for a capital letter or symbol, it is recommended to set the data-key value to it (ie A or !)

Basic Usage

Just requires a clickable child element

<key-down data-key="a">
  <button></button>
</key-down>

With Defined Action

By default, the web component will click the child when the key is pressed, but you can pass in an action like 'focus' for input boxes.

<key-down data-key="b" data-action="focus">
  <input type="text" placeholder="Press 'b' key" />
</key-down>

With Everything

Using every manual property.

<key-down
  data-key="b"
  data-action="focus"
  data-scroll="true"
  data-altKey="false"
  data-ctrlKey="true"
  data-metaKey="false"
  data-shiftKey="false"
>
  <input type="text" placeholder="Press 'ctrl+b' key" />
</key-down>

web component keydown hotkey

Details

npm

melanie/key-down

2026-05-30 15:20:43 +00:00

Melanie Kat

Project website

Unlicense

latest

4 KiB

Assets (1)

key-down-1.0.1.tgz 4 KiB

Versions (1) View all

1.0.1

2026-05-30

Issues