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.
vovaguguiev / react-sunbeam / packages / demo / FocusableCircle.tsx View on Github 
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>react-sunbeam
Spatial navigation and focus management for React
