Fusion UI

Overview

Hotkey displays a keyboard shortcut and can register it at the same time, so the hint and the behavior never drift apart. Keys are shown with the symbols of the platform, e.g. ⌘ on macOS.

Press to increment the count

Press to decrement the count

Count: 0

"use client";

import React, {useState} from "react";
import {Hotkey, useHotkey} from "@brynlabs/fusion-ui";

export const HotkeyExample = () => {
  const [count, setCount] = useState(0);
  useHotkey(["action", "i"], () => setCount(prevCount => prevCount + 1), {scopes: ["global"]});
  useHotkey(["action", "shift", "i"], () => setCount(prevCount => prevCount - 1), {
    scopes: ["global"],
  });

  return (
    <div>
      <p>
        Press <Hotkey hotkey={["action", "i"]} /> to increment the count
      </p>
      <p>
        Press <Hotkey hotkey={["action", "shift", "i"]} /> to decrement the count
      </p>
      <p>Count: {count}</p>
    </div>
  );
};

Types

Global hotkeys work everywhere, scoped ones only within their scope.

Global Hotkeys

Press to increment the count

Press to decrement the count

Global Count: 0

Scoped Hotkeys

Press to increment the count

Scoped Count: 0

Displaying Hotkeys

You can display Hotkeys like this

Special Keys

'action' // Command (meta) on mac, Control (ctrl) on Windows/Linux

"use client";

import React, {useState} from "react";
import {Hotkey, useHotkey, useHotkeyScope} from "@brynlabs/fusion-ui";

export const HotkeyTypesExample = () => {
  const [count, setCount] = useState(0);
  useHotkey(["action", "i"], () => setCount(prevCount => prevCount + 1), {scopes: ["global"]});
  useHotkey(["action", "shift", "i"], () => setCount(prevCount => prevCount - 1), {
    scopes: ["global"],
  });

  const [count2, setCount2] = useState(0);
  useHotkey(["action", "i"], () => setCount2(prevCount => prevCount + 1), {
    scopes: ["custom-scope"],
  });

  useHotkeyScope("custom-scope", true, true);

  return (
    <div style={{display: "flex", flexDirection: "column", gap: "20px", width: "fit-content"}}>
      <div>
        <h4 className={"heading-4-font"}>Global Hotkeys</h4>
        <p>
          Press <Hotkey hotkey={["action", "i"]} /> to increment the count
        </p>
        <p>
          Press <Hotkey hotkey={["action", "shift", "i"]} /> to decrement the count
        </p>
        <p>Global Count: {count}</p>
      </div>

      <div>
        <h4 className={"heading-4-font"}>Scoped Hotkeys</h4>
        <p>
          Press <Hotkey hotkey={["action", "i"]} /> to increment the count
        </p>
        <p>Scoped Count: {count2}</p>
      </div>

      <div>
        <h4 className={"heading-4-font"}>Displaying Hotkeys</h4>
        <p>
          You can display Hotkeys like this <Hotkey hotkey={["action", "shift", "i"]} />
        </p>
      </div>

      <div>
        <h4 className={"heading-4-font"}>Special Keys</h4>
        <p>'action' // Command (meta) on mac, Control (ctrl) on Windows/Linux</p>
      </div>
    </div>
  );
};

Layout

Single Layout:

Multi Layout:

"use client";

import React from "react";
import {Hotkey} from "@brynlabs/fusion-ui";

export const HotkeyLayoutExample = () => (
  <div>
    <p>
      Single Layout: <Hotkey layout={"single"} hotkey={["action", "c"]} />
    </p>
    <p>
      Multi Layout: <Hotkey layout={"multi"} hotkey={["action", "c"]} />
    </p>
  </div>
);

Styles

Copy

Copy ,

Copy

Copy ++

Copy

"use client";

import React from "react";
import {Hotkey} from "@brynlabs/fusion-ui";

export const HotkeyStylesExample = () => (
  <div>
    <p className="body-font">
      Copy <Hotkey hotkey={["action", "C"]} />
    </p>
    <p className="heading-6-font">
      Copy <Hotkey hotkey={["action", "C"]} />
    </p>
    <div
      style={{background: "green", padding: "0 4px", borderRadius: "3px", display: "inline-block"}}
      className="button-font">
      Copy <Hotkey hotkey={["action", "C"]} />
    </div>
    <p className="body-font">
      Copy <Hotkey hotkey={["⇧", "⌥", "C"]} />,
      <Hotkey layout={"multi"} hotkey={["⇧", "⌥", "C"]} />
    </p>
    <p className="body-font">
      Copy <Hotkey hotkey={["⇧", "+", "⌥", "+", "C"]} />
    </p>
    <p className="body-font">
      Copy <Hotkey hotkey={["⇧"]} />+<Hotkey hotkey={["⌥"]} />+<Hotkey hotkey={["C"]} />
    </p>
    <p className="heading-1-font">
      Copy <Hotkey layout={"multi"} hotkey={["⇧", "⌥", "C"]} />
    </p>
    <p className="heading-5-font">
      Copy <Hotkey layout={"multi"} hotkey={["⇧", "⌥", "C"]} />
    </p>
    <p>
      Copy <Hotkey layout={"multi"} hotkey={["action", "⌥", "I"]} />
    </p>
    <p>
      Copy <Hotkey layout={"multi"} hotkey={["action", "⇧", "I"]} />
    </p>
  </div>
);