Merge branch 'master' of https://github.com/reaviz/reakeys

reaviz · Feb 29, 2024 · f15e07b · f15e07b
2 parents 0a4e242 + 66b9f45
commit f15e07b
Show file tree

Hide file tree

Showing 7 changed files with 252 additions and 236 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 <div align="center">
  <h1>⌨️ reakeys</h1>
  <br />
- React Hook for Mousetrap Hotkeys
+ React Hook for Ctrl-keys Hotkeys
  <br /><br />
  <a href="https://github.com/reaviz/reakeys/workflows/build/">
  <img src="https://github.com/reaviz/reakeys/workflows/build/badge.svg?branch=master" />
@@ -12,7 +12,7 @@
  <a href="https://npm.im/reakeys">
  <img src="https://badgen.net/npm/dw/reakeys" />
  </a>
- <a href="https://github.com/realayers/reakeys/blob/master/LICENSE">
+ <a href="https://github.com/reaviz/reakeys/blob/master/LICENSE">
  <img src="https://badgen.now.sh/badge/license/apache2" />
  </a>
  <a href="https://bundlephobia.com/result?p=reakeys">
@@ -85,11 +85,11 @@ const hotkeys = useHotkeys();
 
 This is useful for creating a dialog to present the user
 with all the options. Below is an example of how to make
-a dialog using [realayers](https://github.com/reaviz/realayers):
+a dialog using [reablocks](https://github.com/reaviz/reablocks):
 
 ```jsx
 import React, { useState, FC, useCallback, useMemo } from 'react';
-import { Dialog } from 'realayers';
+import { Dialog } from 'reablocks';
 import { useHotkeys, getHotkeyText } from 'reakeys';
 import groupBy from 'lodash/groupBy';
 import sortBy from 'lodash/sortBy';

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "reakeys",
- "version": "1.3.1",
- "description": "React Hotkeys Hooks using MouseTrap",
+ "version": "2.0.0",
+ "description": "React Hotkeys Hooks",
  "scripts": {
  "build": "vite build --mode library",
  "build-storybook": "storybook build",
@@ -48,7 +48,7 @@
  },
  "homepage": "https://github.com/reaviz/reakeys#readme",
  "dependencies": {
- "mousetrap": "^1.6.5"
+ "ctrl-keys": "^1.0.1"
  },
  "peerDependencies": {
  "react": ">=16",
@@ -64,7 +64,6 @@
  "@storybook/react-vite": "^7.0.20",
  "@storybook/theming": "7.0.20",
  "@types/classnames": "^2.3.1",
- "@types/mousetrap": "^1.6.11",
  "@types/react": "^18.2.12",
  "@types/react-dom": "^18.2.5",
  "@typescript-eslint/eslint-plugin": "^5.59.11",

diff --git a/src/Hotkey.story.tsx b/src/Hotkey.story.tsx
@@ -1,4 +1,3 @@
-import Mousetrap from 'mousetrap';
 import React, { useEffect, useRef, useState } from 'react';
 import { useHotkeys } from './useHotkeys';
 
@@ -7,9 +6,7 @@ export default {
 };
 
 export const Simple = () => {
- const hotkeys = useHotkeys([
- { name: 'Test', keys: 'SHIFT+A', callback: () => alert('holla') },
- ]);
+ const hotkeys = useHotkeys([{ name: 'Simple', keys: 'SHIFT+A', callback: () => alert('SHIFT + A pressed') }]);
 
  return (
  <div>
@@ -25,12 +22,51 @@ export const Simple = () => {
  );
 };
 
+export const Input = () => {
+ const hotkeys = useHotkeys([{ name: 'Input', keys: 'SHIFT+A', callback: () => alert('SHIFT + A pressed') }]);
+
+ return (
+ <div>
+ Press SHIFT + A (shouldn't trigger if input is focused)
+ <br />
+ <input />
+ <pre>
+ {JSON.stringify(
+ hotkeys.map(({ ref: element, ...rest }) => rest),
+ null,
+ 2
+ )}
+ </pre>
+ </div>
+ );
+};
+
+export const Disable = () => {
+ const [disabled, setDisabled] = useState<boolean>(false);
+
+ const hotkeys = useHotkeys([{ name: 'Disable', keys: 'SHIFT+A', callback: () => alert('SHIFT + A pressed'), disabled }]);
+
+ return (
+ <div>
+ Press SHIFT + A<br />
+ <button onClick={() => setDisabled(!disabled)}>{!disabled ? 'Disable' : 'Enable'}</button>
+ <pre>
+ {JSON.stringify(
+ hotkeys.map(({ ref: element, disabled, ...rest }) => rest),
+ null,
+ 2
+ )}
+ </pre>
+ </div>
+ );
+};
+
 export const Refs = () => {
  const [color, setColor] = useState('blue');
 
  const hotkeys = useHotkeys([
  {
- name: 'Test',
+ name: 'Refs',
  keys: 'SHIFT+A',
  callback: () => {
  alert(`color: ${color}`);
@@ -59,17 +95,15 @@ export const Refs = () => {
 
 export const Multiple = () => {
  const hotkeys = useHotkeys([
- { name: 'Test', keys: 'SHIFT+A', callback: () => alert('holla') },
- ]);
-
- useHotkeys([
- { name: 'Test 2', keys: 'mod+b', callback: () => alert('baller') },
+ { name: 'Nested A', keys: ['SHIFT+A'], callback: () => alert('SHIFT + A pressed') },
+ { name: 'Nested B', keys: ['META+B'], callback: () => alert('META + B pressed') },
  ]);
 
  return (
  <div>
- Press SHIFT + A<br />
- Press MOD + b<br />
+ Press SHIFT + A
+ <br />
+ Press META + B
  <br />
  <pre>
  {JSON.stringify(
@@ -83,24 +117,19 @@ export const Multiple = () => {
 };
 
 const NestedComponent = () => {
- useHotkeys([
- { name: 'Test 2', keys: 'mod+b', callback: () => alert('baller') },
- ]);
+ useHotkeys([{ name: 'Child', keys: ['META+B'], callback: () => alert('META + B (child)') }]);
 
- return <h1>Press MOD + b</h1>;
+ return <h1>Press META + B</h1>;
 };
 
 export const Nested = () => {
- const hotkeys = useHotkeys([
- { name: 'Test', keys: 'SHIFT+A', callback: () => alert('holla') },
- ]);
+ const hotkeys = useHotkeys([{ name: 'Parent', keys: ['SHIFT+A'], callback: () => alert('SHIFT + A (parent)') }]);
 
  return (
  <div>
  Press SHIFT + A<br />
  <NestedComponent />
  <br />
- <br />
  <pre>
  {JSON.stringify(
  hotkeys.map(({ ref: element, ...rest }) => rest),
@@ -119,35 +148,26 @@ export const Focus = () => {
 
  const hotkeys = useHotkeys([
  {
- name: 'Test 3',
- keys: 'SHIFT+C',
+ name: 'Focus A',
+ keys: ['SHIFT+C'],
  callback: () => alert(`first, counter: ${counter}`),
  ref: elmRef,
  },
- ]);
-
- useHotkeys([
  {
- name: 'Test 3',
- keys: 'SHIFT+C',
+ name: 'Focus b',
+ keys: ['SHIFT+C'],
  callback: () => alert(`second, counter: ${counter}`),
  ref: elmRef2,
  },
  ]);
 
  return (
  <div>
- <button
- type="button"
- onClick={() => setCounter((currentCounter) => currentCounter - 1)}
- >
+ <button type="button" onClick={() => setCounter((currentCounter) => currentCounter - 1)}>
  -1
  </button>
  {counter}
- <button
- type="button"
- onClick={() => setCounter((currentCounter) => currentCounter + 1)}
- >
+ <button type="button" onClick={() => setCounter((currentCounter) => currentCounter + 1)}>
  +1
  </button>
  <br />
@@ -174,16 +194,16 @@ export const Focus = () => {
 export const Action = () => {
  const hotkeys = useHotkeys([
  {
- name: 'Pay respects',
- keys: 'f',
+ name: 'Action',
+ keys: ['F'],
  callback: () => alert("You've been promoted!"),
  action: 'keyup',
  },
  ]);
 
  return (
- <div>
- Press f to pay respects
+ <>
+ <div>Press "f" to pay respects</div>
  <br />
  <pre>
  {JSON.stringify(
@@ -192,17 +212,17 @@ export const Action = () => {
  2
  )}
  </pre>
- </div>
+ </>
  );
 };
 
 export const Asynchronous = () => {
  const elmRef = useRef<HTMLDivElement | null>(null);
  const [loaded, setLoaded] = useState(false);
- const hotkeys = useHotkeys([
+ useHotkeys([
  {
- name: 'Loaded',
- keys: 'l',
+ name: 'Asynchronous',
+ keys: ['L'],
  callback: () => alert('Hey!'),
  action: 'keyup',
  ref: elmRef,
@@ -223,35 +243,28 @@ export const Asynchronous = () => {
 
  return (
  <div>
- {loaded
- ? 'Loaded'
- : 'Loading (pressing "l" is disabled until the element is shown and focused)...'}
+ {loaded ? 'Loaded' : 'Loading (pressing "L" is disabled until the element is shown and focused)...'}
+ <br />
  <button type="button" onClick={() => setLoaded(false)} disabled={!loaded}>
  reload
  </button>
  <br />
  {loaded && (
  <div ref={elmRef} tabIndex={-1}>
- Click me and press &quot;l`&quot;
+ Click me and press &quot;l&quot;
  </div>
  )}
- <pre>
- {JSON.stringify(
- hotkeys.map(({ ref: element, ...rest }) => rest),
- null,
- 2
- )}
- </pre>
  </div>
  );
 };
 
 const Counter = () => {
  const [counter, setCounter] = useState(0);
- const hotkeys = useHotkeys([
+
+ useHotkeys([
  {
- name: 'Generate a random number',
- keys: 'g',
+ name: 'Counter',
+ keys: ['G'],
  callback: () => setCounter(Math.random()),
  },
  ]);
@@ -261,22 +274,17 @@ const Counter = () => {
  <ol>
  <li>Press &quot;g&quot; to generate a random number: {counter}</li>
  <li>Open the modal, press &quot;g&quot; and close the modal</li>
- <li>
- Press &quot;g&quot; once the modal is closed, it should generate
- random number
- </li>
+ <li>Press &quot;g&quot; once the modal is closed, it should generate random number</li>
  </ol>
- <br />
- <pre>{JSON.stringify(hotkeys, null, 2)}</pre>
  </div>
  );
 };
 
 const ModalComponent = ({ onClose }: { onClose: () => void }) => {
- const hotkeys = useHotkeys([
+ useHotkeys([
  {
- name: 'Modal shortcut',
- keys: 'g',
+ name: 'ModalComponent',
+ keys: ['G'],
  callback: () => alert('This shortcut is bound through the modal'),
  },
  ]);
@@ -297,8 +305,6 @@ const ModalComponent = ({ onClose }: { onClose: () => void }) => {
  </button>
  <br />
  <p>Press g</p>
- <br />
- <pre>{JSON.stringify(hotkeys, null, 2)}</pre>
  </div>
  </div>
  );
@@ -318,25 +324,11 @@ const ModalToggle = () => {
 };
 
 export const Modal = () => {
+ const hotkeys = useHotkeys();
  return (
  <div>
  <Counter />
  <ModalToggle />
- </div>
- );
-};
-
-export const Trigger = () => {
- const hotkeys = useHotkeys([
- { name: 'Test', keys: 'SHIFT+A', callback: () => alert('holla') },
- ]);
-
- return (
- <div>
- <button type="button" onClick={() => Mousetrap.trigger('SHIFT+A')}>
- Trigger shift+a
- </button>
- Press SHIFT + A<br />
  <pre>
  {JSON.stringify(
  hotkeys.map(({ ref: element, ...rest }) => rest),

diff --git a/src/index.ts b/src/index.ts
@@ -1,3 +1,2 @@
 export * from './useHotkeys';
-export * from './useHotkeyState';
 export * from './utils';