How to use react-sunbeam - 7 common examples

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 / Box.tsx View on Github external
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])
github vovaguguiev / react-sunbeam / packages / demo / FocusableItem.tsx View on Github external
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>
github vovaguguiev / react-sunbeam / packages / demo / GamesGallery.tsx View on Github external
const newScrollX = ensureScrollXWithinBounds(scrollX + deltaScrollX)
            function ensureScrollXWithinBounds(value: number): number {
                const minScrollX = 0
                const maxScrollX = trackRef.current.scrollWidth - viewportWidth
                if (value &lt; minScrollX) return minScrollX
                if (value &gt; maxScrollX) return maxScrollX
                return value
            }
            if (newScrollX !== scrollX) setScrollX(newScrollX)

            onItemFocus(event)
        },
        [scrollX]
    )

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

    return (
        
            <div style="{{">
                <div style="{{"></div></div>
github vovaguguiev / react-sunbeam / packages / demo / FocusableCircle.tsx View on Github external
export function FocusableCircle({ focusKey, children, onFocus }: Props) {
    const circleRef = useRef()

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

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

    return (
github vovaguguiev / react-sunbeam / packages / demo / FocusableItem.tsx View on Github external
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(() =&gt; {
        if (prevFocused !== focused &amp;&amp; focused &amp;&amp; onFocus) {
            onFocus({ element: elementRef.current, focusPath: path })
        }
    })

    const handleClick = useCallback(() =&gt; {
        setFocus(path)
    }, [path])

    return (
        <div style="{typeof">
            {children}</div>
github vovaguguiev / react-sunbeam / packages / demo / index.tsx View on Github external
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":
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 3 years ago

Package Health Score

45 / 100
Full package analysis

Similar packages