How to use the react-sunbeam.KeyPressManager function in react-sunbeam

To help you get started, we’ve selected a few react-sunbeam examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github vovaguguiev / react-sunbeam / packages / demo / index.tsx View on Github external
FocusableTreeNode,
    FocusEvent,
    FocusManager,
    SunbeamProvider,
    unstable_defaultGetPreferredChildOnFocusReceive,
    KeyPressManager,
} from "react-sunbeam"

import { ProfilesMenu } from "./ProfilesMenu"
import { GamesGallery } from "./GamesGallery"
import { NavigationMenu } from "./NavigationMenu"

const focusManager = new FocusManager({
    initialFocusPath: ["gallery", "1"],
})
const keyPressManager = new KeyPressManager()
keyPressManager.addListener(event => {
    switch (event.key) {
        case "ArrowRight":
            event.preventDefault()
            focusManager.moveRight()
            return

        case "ArrowLeft":
            event.preventDefault()
            focusManager.moveLeft()
            return

        case "ArrowUp":
            event.preventDefault()
            focusManager.moveUp()
            return

react-sunbeam

Spatial navigation and focus management for React

MIT
Latest version published 4 years ago

Package Health Score

45 / 100
Full package analysis

Similar packages