@amruthlp/hotkeys

A simple React component for handling keyboard shortcuts in Next.js applications. It allows you to define custom key combinations and callbacks.

Installation

To use this package, first install it via npm:

npm install @amruthlp/hotkeys 

Usage

Here's a simple example of how to use the HotKeys component in your Next.js application.

Example

'use client';

import { useRouter } from "next/navigation";
import { HotKeys } from "@amruthlp/hotkeys";

export default function Home() {
  const router = useRouter();

  // Define your keyboard shortcuts
  const shortcuts = [
    {
      keys: ["ctrl", "h"], // The keys to trigger the action
      callback: () => {
        // This will open the URL in a new tab
        window.open("https://www.npmjs.com/package/@amruthlp/hotkeys", "_blank");
      },
    },
  ];

  return (
    <div>
      <h1>Welcome to the HotKeys Example</h1>
      {/* Use the HotKeys component */}
      <HotKeys shortcuts={shortcuts} />
    </div>
  );
}

Explanation

1. Import the component: Import the HotKeys component from @amruthlp/hotkeys.
2. Define your shortcuts: Create an array of objects, where each object contains:
   • keys: An array of strings representing the keys to trigger the action (e.g., ["ctrl", "h"]).
   • callback: A function that gets executed when the key combination is pressed.
3. Open URLs in new tab: You can use window.open(URL, "_blank") in the callback to open links in a new tab.
4. Wrap in the component: Use the HotKeys component by passing the shortcuts array as a prop.

Props

• shortcuts: An array of shortcut objects, where each object includes:
  • keys: An array of strings representing the key combination (e.g., ["ctrl", "k"]).
  • callback: A function that gets triggered when the key combination is pressed.

Example of Multiple Shortcuts

You can also handle multiple shortcuts:

const shortcuts = [
  {
    keys: ["ctrl", "h"],
    callback: () => {
      console.log("Ctrl + H was pressed");
    },
  },
  {
    keys: ["ctrl", "s"],
    callback: () => {
      console.log("Ctrl + S was pressed");
    },
  },
];

Development

To build and develop this package locally:

1. Clone the repository:

   git clone https://github.com/AmruthLP12/npm-hotkeys.git
   cd npm-hotkeys

2. Install dependencies:

   npm install

3. Build the package:

   npm run build

4. Publish to npm:

   npm publish --access public