How to use react-sunbeam - 7 common examples

export function Box({ focused, color, children, onFocus, onBlur, path }: Props) {
    const { setFocus } = useSunbeam()
    const prevFocused = usePrevious(focused, focused)

    useEffect(() => {
        if (prevFocused === focused) return

        if (focused && onFocus) {
            onFocus()
            return
        }

        if (onBlur) onBlur()
    }, [prevFocused, focused, onFocus, onBlur])

    const onClick = useCallback(() => {
        setFocus(path)
    }, [path])

export function FocusableItem({ children, style, focusKey, onFocus }: Props) {
    const elementRef = useRef(null)
    const { focused, path } = useFocusable(focusKey, elementRef)
    const { setFocus } = useSunbeam()

    const prevFocused = usePrevious(focused, focused)
    useEffect(() => {
        if (prevFocused !== focused && focused && onFocus) {
            onFocus({ element: elementRef.current, focusPath: path })
        }
    })

    const handleClick = useCallback(() => {
        setFocus(path)
    }, [path])

    return (
        <div style="{typeof">
            {children}
        </div>

const newScrollX = ensureScrollXWithinBounds(scrollX + deltaScrollX)
            function ensureScrollXWithinBounds(value: number): number {
                const minScrollX = 0
                const maxScrollX = trackRef.current.scrollWidth - viewportWidth
                if (value < minScrollX) return minScrollX
                if (value > maxScrollX) return maxScrollX
                return value
            }
            if (newScrollX !== scrollX) setScrollX(newScrollX)

            onItemFocus(event)
        },
        [scrollX]
    )

    const { setFocus } = useSunbeam()
    const handleItemClick = useCallback((itemFocusPath: ReadonlyArray) => {
        setFocus(itemFocusPath)
    }, [])

    return (
        
            <div style="{{">
                <div style="{{"></div></div>

export function FocusableCircle({ focusKey, children, onFocus }: Props) {
    const circleRef = useRef()

    const { focused, path } = useFocusable(focusKey, circleRef)
    const prevFocused = usePrevious(focused, focused)

    useEffect(() => {
        if (prevFocused !== focused && focused && onFocus) onFocus({ focusPath: path, element: circleRef.current })
    }, [prevFocused, focused, onFocus])

    return (

export function FocusableItem({ children, style, focusKey, onFocus }: Props) {
    const elementRef = useRef(null)
    const { focused, path } = useFocusable(focusKey, elementRef)
    const { setFocus } = useSunbeam()

    const prevFocused = usePrevious(focused, focused)
    useEffect(() => {
        if (prevFocused !== focused && focused && onFocus) {
            onFocus({ element: elementRef.current, focusPath: path })
        }
    })

    const handleClick = useCallback(() => {
        setFocus(path)
    }, [path])

    return (
        <div style="{typeof">
            {children}</div>

import {
    Direction,
    Focusable,
    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":

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