How to use the react-sunbeam.useFocusable 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 / 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(() => {
        if (prevFocused !== focused && focused && 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(() => {
        if (prevFocused !== focused && focused && onFocus) {
            onFocus({ element: elementRef.current, focusPath: path })
        }
    })

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

    return (
        <div style="{typeof">
            {children}</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