HotkeysTarget & useHotkeys migration

HotkeysTarget in Blueprint v4.0 features some breaking changes compared to v3.0. To help you migrate to the new component, we've provided a new component called HotkeysTarget2 in @blueprintjs/core v3.39.0+. Alternatively, you can switch to using the useHotkeys hook directly, which HotkeysTarget2 uses under the hood.

HotkeysTarget / useHotkeys Requirements

• useHotkeys is a custom React hook, so you must use React 16.8+, otherwise it will fail at runtime. @blueprintjs/core >=v3.39.0 <4.0.0 is lenient about its React peer dependency and will not enforce this constraint for you.
• You must configure HotkeysProvider near the root of your React component tree:

import { HotkeysProvider } from "@blueprintjs/core";
import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <HotkeysProvider>
    // your app
  </HotkeysProvider>,
  ...
);

Notable changes compared to HotkeysTarget

The hotkeys API has been overhauled to use modern React APIs. It now works with function components and no longer requires your build system to support decorators.

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

export default function HotkeysExample() {
    const { handleKeyDown, handleKeyUp } = useHotkeys([
        // define hotkeys
    ]);

    return (
        <div className="my-hotkeys-example" onKeyDown={handleKeyDown} onKeyUp={handleKeyUp}>
            try me
        </div>
    );
}