Key Sequence

This component allows you to display a combination of keys to the user.

Examples

Default

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;

ReactDOM.render(
    <FluentProvider { ...{ theme } }>
        <KeySequence Sequence={[ "ControlLeft", "ShiftRight", "KeyS" ]}/>
    </FluentProvider>,
    document.getElementById("root"),
);

Corner Symbols

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;

ReactDOM.render(
    <FluentProvider { ...{ theme } }>
        <KeySequence
            CornerDirection,
            Sequence={[ "MetaLeft", "ShiftRight", "Digit6" ]}
        />
    </FluentProvider>,
    document.getElementById("root"),
);

Table of contents

Type Aliases

• PKeySequence
• SKeySequence

Type Aliases

PKeySequence

Ƭ PKeySequence: Pick<PKey, "CornerDirection"> & { Sequence: FDomKey[] }

Defined in

Component/KeySequence/KeySequence.Types.ts:10

---

SKeySequence

Ƭ SKeySequence: PKeySequence & FStyledState

Defined in

Component/KeySequence/KeySequence.Types.ts:15