How to use the react-sunbeam.useSunbeam 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 / 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>

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