https://github.com/filippo-fonseca/use-key-event

⌨️ A lightweight, zero-dependency React hook for detecting dynamic keyboard events. Written in TypeScript.
https://github.com/filippo-fonseca/use-key-event

keyboard keyboard-events lightweight lightweight-framework modular react react-hook typescript typescript-definitions typescript-library

Last synced: 2 months ago
JSON representation

⌨️ A lightweight, zero-dependency React hook for detecting dynamic keyboard events. Written in TypeScript.

• Host: GitHub
• URL: https://github.com/filippo-fonseca/use-key-event
• Owner: filippo-fonseca
• License: mit
• Created: 2021-01-06T03:18:52.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-02-08T18:24:39.000Z (almost 4 years ago)
• Last Synced: 2024-10-28T22:13:25.549Z (3 months ago)
• Topics: keyboard, keyboard-events, lightweight, lightweight-framework, modular, react, react-hook, typescript, typescript-definitions, typescript-library
• Language: TypeScript
• Homepage: https://npmjs.com/package/use-key-event
• Size: 189 KB
• Stars: 7
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# `useKeyEvent`

###### v0.0.3-alpha | STABLE

![CI Status](https://github.com/webmail/use-last-fm/workflows/CI/badge.svg)

![Stars](https://img.shields.io/github/stars/filippo-fonseca/use-key-event)

![LICENSE](https://img.shields.io/github/license/filippo-fonseca/use-key-event)

![SIZE](https://img.shields.io/bundlephobia/minzip/use-key-event)

⌨️ A lightweight, zero-dependency React hook for detecting dynamic keyboard events. Written in TypeScript. 

## Installation

```bash

yarn add use-key-event

# or

npm i use-key-event

```

`use-key-event` is lightweight and carries no extra dependencies, making it perfect for building production applications and dkeeping them light.

## Usage

**Example:**

###### Home.tsx

```tsx

import useKeyEvent from "use-key-event";

const Home = () => {

  const handleEvent = () => {

    console.log("The enter key has been pressed.");

  };

  

  useKeyEvent("Enter", handleEvent);

  return (

    


      Press the enter key and check your console!

    

  );

};


export default Home;

```

## TypeScript

`use-key-event` is written in TypeScript (statically-typed) and comes with type definitions out-of-the-box, so using it with TypeScript in your application (even in production-grade environments) will be seamless and integrated.

## Contributing

PRs, issues, and contributions are welcome! You can read the code of conduct [here](https://github.com/filippo-fonseca/use-key-event/blob/main/CODE_OF_CONDUCT.md).

 


Created and maintained with ❤️ by [**@FilippoFonseca**](https://www.twitter.com/FilippoFonseca).