Skip to main content

@mrii/react-mousetrap-hook@1.0.0

A simple wrapper on top of mousetrap to work with react

Works with
This package works with Bun
This package works with Cloudflare Workers
This package works with Node.js
This package works with Deno
This package works with Browsers
JSR Score
76%
Published
2 weeks ago

react-mousetrap-hook

A simple wrapper on top of mousetrap to work with react.

It returns proxy ref object to bind the action to multiple inputs

This package is using lbundle as bundler ✨

Installation

NPM registry

# npm
npm i react-mousetrap-hook mousetrap

# yarn
yarn add react-mousetrap-hook mousetrap

# pnpm
pnpm i react-mousetrap-hook mousetrap

# bun
bun i react-mousetrap-hook mousetrap

JSR registry

# deno
deno add @mrii/react-mousetrap-hook

# jsr
npx jsr add @mrii/react-mousetrap-hook

Usage

bind events for specific components

import { useCallback } from 'react';
import { useMousetrap } from '@mrii/react-mousetrap-hook';

export const Component: React.FC = () => {
  // returns proxyRef from `@mrii/react-proxy-ref`
  const proxyRef = useMousetrap(
    ['enter', 'shift+enter'],
    useCallback(({ combo }) => {
      console.log(combo);

      // submit
    }, [])
  );

  return (
    <>
      {/* the names doesn't matter, we are looping over them */}
      <input ref={proxyRef.email} name='email' />
      <input ref={proxyRef.password} name='password' />
    </>
  );
};

bind events to the document

import { useCallback } from 'react';
import { useDocumentMousetrap } from '@mrii/react-mousetrap-hook';

export const Component: React.FC = () => {
  // returns proxyRef from `@mrii/react-proxy-ref`
  useDocumentMousetrap(
    'ctrl+k',
    useCallback(() => {
      // open search
    }, []),
    'keyup'
  );

  //...
};

API

useMousetrap

hook to initiate Mousetrap on set of elements

Property Type Default Description Version
arg0:keys string | string[] undefined keys to be applied to Mousetrap.bind(keys) 1.0.0
arg1:cb Function undefined callback to be applied to Mousetrap.bind(, cb) 1.0.0
arg2:action string? undefined optional action to be applied to Mousetrap.bind(, , action) 1.0.0

return: ProxyRefObject<keyof any, TRef>


useDocumentMousetrap

hook to initiate Mousetrap to the document

Property Type Default Description Version
arg0:keys string | string[] undefined keys to be applied to Mousetrap.bind(keys) 1.0.0
arg1:cb Function undefined callback to be applied to Mousetrap.bind(, cb) 1.0.0
arg2:action string? undefined optional action to be applied to Mousetrap.bind(, , action) 1.0.0

return: void


Notes

  • it's important to use useCallback when passing the callback to the hook, so you will save a lot of performance.
  • there is no need to memoize the keys, because we are shallow comparing the changes.
Built and signed on
GitHub Actions
View transparency log

Add Package

deno add @mrii/react-mousetrap-hook

Import symbol

import * as mod from "@mrii/react-mousetrap-hook";

Add Package

npx jsr add @mrii/react-mousetrap-hook

Import symbol

import * as mod from "@mrii/react-mousetrap-hook";

Add Package

yarn dlx jsr add @mrii/react-mousetrap-hook

Import symbol

import * as mod from "@mrii/react-mousetrap-hook";

Add Package

pnpm dlx jsr add @mrii/react-mousetrap-hook

Import symbol

import * as mod from "@mrii/react-mousetrap-hook";

Add Package

bunx jsr add @mrii/react-mousetrap-hook

Import symbol

import * as mod from "@mrii/react-mousetrap-hook";