Customizing DatafariUI - Hotkey

Valid from Datafari 5.1 (UI 1.0.0-beta-0.6.0) up to Datafari 6.2 excluded

The useHotkey hook allows to define a hotkey with one command key plus an optional second letter key.
Command keys are defined as below (case sensitive) :

shift
alt
ctrl
escape

These command keys are defined in src/Hooks/useHotkey.js. Use exported cmd keys ID in other components.

These command keys can be associated with another key like any alphanumeric key, to provide hotkey under the form : [CMD+key] such as [ctrl+k], [shift+S] etc.

useHotkey hook can be used anywhere in the react application. Exemple of use :

import { CTRL } from "src/Hooks/useHotkey.js"

const { hotkey: ctrlHotkey } = useHotkey({
  cmd: CTRL,
  key: "D",
  enable: true,  
  callback: handleHotkey,
});

The hook uses the following parameters :

cmd : Command key, one of defined command keys in the useHotkey js file
key (optional, default value to "") : Second key of the hotkey.
enable (optional, default is false) : True to enable the hotkey. False otherwise. In this last case, empty string will be returned
callback : Called if command key matched and either the second key matched or it equals to empty string

The hook returns a component that represents the hotkey. You can mount it wherever you want in your component. By default, this component displays the hotkey between [] like [⇧S].

Hotkeys configuration

Hotkeys can be configured into ui-config.json file, like below ;

"hotkeys": {
    "activeSearchBar": {
      "cmd": "shift",
      "key": "S",
      "enable": false
    },
    "deactiveSearchBar": {
      "cmd": "escape",
      "enable": false
    }
  }

Be care, cmd and key are case sensitive. If you use shift as command, the key MUST be in CAPITAL.

Hotkeys IDs are defined into the useHotkey.js (activeSearchBar, deactiveSearchBar, ...). Defined here other IDs to increase the list of hotkeys available