Keybind Recorder

This component allows the user to record a keybind, for your app to save and use later in the user experience.

It is intended to be wrapped in something to handle focus, and saving the sequence that it records. The default implementation of this is the KeybindDialog component.

Example

Click the Recorder component to gain focus of it.

Code Snippet

import React from "react";
import ReactDOM from "react-dom";
import { FluentProvider, type Theme, webLightTheme, webDarkTheme } from "@fluentui/react-components";
import { Key, KeySequence } from "react-fluent-keybinds";

const DarkMode: boolean = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
const theme: Theme = DarkMode ? webDarkTheme : webLightTheme;

const [ Sequence, SetSequence ] = useState(false);
const OnChange = (NewSequence) =>
{
    SetSequence(_Old => NewSequence);
};

ReactDOM.render(
    <FluentProvider { ...{ theme } }>
        <KeybindRecorder { ...{ OnChange, Sequence } }/>
    </FluentProvider>,
    document.getElementById("root"),
);

Table of contents

Type Aliases

• FKeySequence
• PKeybindRecorder
• SKeybindRecorder

Type Aliases

FKeySequence

Ƭ FKeySequence: FDomKey[]

Defined in

Component/KeybindRecorder/KeybindRecorder.Types.ts:43

---

PKeybindRecorder

Ƭ PKeybindRecorder: Pick<PKey, "CornerDirection"> & { Sequence: FKeySequence } & Partial<{ ExclusionList: FDomKey[] ; MaxLength: number ; OnBlur: (Event: FocusEvent, ClearSequence: () => void) => void ; OnChange: (NewSequence: FKeySequence) => void ; OnExcludedKeyPressed: (Key: FDomKey) => void }>

Defined in

Component/KeybindRecorder/KeybindRecorder.Types.ts:11

---

SKeybindRecorder

Ƭ SKeybindRecorder: Omit<PKeybindRecorder, "OnChange"> & FStyledState & { onBlur: (Event: FocusEvent) => void ; onKeyDown: (Event: KeyboardEvent) => void ; onKeyUp: (Event: KeyboardEvent) => void }

Defined in

Component/KeybindRecorder/KeybindRecorder.Types.ts:45