React.js Blueprint useHotkeys

BlueprintJS is a React-based UI toolkit for the web. It is written in Typescript. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications that run in a modern web browser.

useHotKeys hook offered by BlueprintJS: useHotKeys hook allows the user to add hotkeys or keyboard shortcuts interactions to their application using a custom React hook. The user can decide upon the hotkeys or keyboard shortcut combinations.

useHotKeys return values:

• UseHotkeysReturnValue: It returns a react hook that allows us to register global and local hotkeys for a component.

useHotKeys parameters:

• keys: It denotes the list of hotkeys to configure
• options: It denotes the hook options

useHotKeys props:

• allowInInput: It determines whether the hotkey should be triggerable when focused on text input.
• combo: It denotes the hotkey combination string
• disabled: It determines whether the hotkey can be triggered
• global: It determines whether the hotkey can be triggered or it can only be active when the target is focused
• group: It determines where the hotkey will be displayed in the hotkeys dialog
• label: It denotes the label for the hotkey
• onKeyDown: It denotes the event handler for the hotkey combination is pressed
• onKeyUp: It denotes the event handler for the hotkey combination is released
• preventDefault: It determines whether event.preventDefault() is invoked before the respective onKeyDown and onKeyUp callbacks are invoked.
• stopPropagation: It determines whether event.stopPropagation() is invoked before the respective onKeyDown and onKeyUp callbacks are invoked.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @blueprintjs/core

Project Structure:  It will look like the following.

Usage: Before proceeding with the examples, please make sure to use and wrap your React app inside the HotKeysProvider. For this, please update your index.js like the one below –

• Filename: index.js

Javascript

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { HotkeysProvider } from '@blueprintjs/core';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <HotkeysProvider>
        <App />
    </HotkeysProvider>
);

reportWebVitals();

Example 1: In this example, we will try to create a simple dropdown application using useHotKeys component provided by BlueprintJS.

Now write down the following code in the App.js file. Here, App is our default component where we have written our code:

Javascript

import { useHotkeys } from "@blueprintjs/core";
import React, { useMemo } from "react";

export default function App() {
    // important: hotkeys array must be memoized to
    // avoid infinitely re-binding hotkeys
    const hotkeys = useMemo(() => [
        {
            combo: "R",
            global: true,
            label: "Refresh data",
            onKeyDown: () => console.info("Refreshing data...")
        }
    ], []);
    const { handleKeyDown, handleKeyUp } = useHotkeys(hotkeys);

    return (
        <div tabIndex={0} onKeyDown={handleKeyDown}
            onKeyUp={handleKeyUp}>
            Press "R" to refresh data
        </div>
    );
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: In this example, let’s change the placeholder, in our dropdown component, for search input. Change your App.js like the one below.

Javascript

import { useHotkeys } from "@blueprintjs/core";
import React, { createRef, useMemo } from "react";

export default function App() {
    const inputRef = createRef();

    // important: hotkeys array must be memoized to
    // avoid infinitely re-binding hotkeys
    const hotkeys = useMemo(() => [
        {
            combo: "F",
            label: "Focus text input",
            global: true,
            onKeyDown: () => {
                const inputElm = document.getElementById('text')
                inputElm.focus()
            }
        },
    ], []);
    const { handleKeyDown, handleKeyUp } = useHotkeys(hotkeys);

    return (
        <div tabIndex={0} onKeyDown={handleKeyDown}
            onKeyUp={handleKeyUp}>
            Press "F" to focus the input...
            <div>
                <input id="text" ref={inputRef} />
            </div>
        </div>
    );
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output:

Reference: https://blueprintjs.com/docs/#core/hooks/use-hotkeys