)
}
```
## API
### `FocusManager`
`FocusManager` is responsible for maintaining the tree of focusable nodes and updating the currently focused node.
Usually, your app will only have a single instance of it which you pass to a `` component
#### `moveLeft()` / `moveRight()` / `moveUp()` / `moveDown()`
These are the most important methods of `FocusManager`.
They move focus to the nearest focusable node in the corresponding direction.
You can call these methods in response to any events you want: key presses, game controller button presses, scroll events, etc.
#### `setFocus(path: string[]): void`
Immediately makes focused the focusable node with the given `path`.
#### Example
```js
import { render } from "react-dom"
import { SunbeamProvider, FocusManager } from "react-sunbeam"
import { App } from "./App"
const focusManager = new FocusManager({
initialFocusPath: ["menuContainer", "menuItem1"],
})
// Use arrow key presses to control focus.
document.addEventListener("keydown", (event) => {
switch (event.key) {
case "ArrowRight":
focusManager.moveRight()
return
case "ArrowLeft":
focusManager.moveLeft()
return
case "ArrowUp":
focusManager.moveUp()
return
case "ArrowDown":
focusManager.moveDown()
return
case "Backspace":
focusManager.setFocus(["carousel", "item-1"])
return
}
})
render(
,
document.getElementById("app")
)
```
### `SunbeamProvider`
### `Focusable`
### `useSunbeam(): { setFocus(focusPath: readonly string[]): void; moveFocusRight(): void; moveFocusLeft(): void; moveFocusUp(): void; moveFocusDown(): void; }`
This hook provides access to some public methods of `FocusManager` inside the React components.
It expects `` to be present in the tree, otherwise it returns no-op versions of the methods
### `useFocusable(options: Options): { focused: boolean; path: string[] }`
This hook makes the enclosing component focusable. It can only be used for the "leaf" focusables so the component
that uses it cannot have other focusable children. If you need the latter behaviour use `` instead.
#### Options
```typescript
type Options = {
// Ref object pointing to a DOM Element or any other object that has 'getBoundingClientRect(): ClientRect' method
elementRef: React.RefObject<{ getBoundingClientRect(): ClientRect }>
// If set to false the node is ignored in focus management process. Default: true
focusable?: boolean
focusKey?: string
// If set prevents the node from losing focus when navigating in the given directions
lock?: Direction | Direction[]
onKeyPress?: (event: KeyboardEvent) => void
onFocus?: (event: { focusablePath: readonly string[]; getBoundingClientRect: () => ClientRect }) => void
onBlur?: (event: { focusablePath: readonly string[]; getBoundingClientRect: () => ClientRect }) => void
}
```
#### Example
```typescript jsx
import React from "react"
import { useFocusable } from "react-sunbeam"
export function FocusableButton({ children }) {
const ref = React.useRef(null)
const { focused } = useFocusable({
elementRef: ref,
onKeyPress(event) {
if (event.key === "Enter") {
event.stopPropagation()
alert("Click!")
}
},
})
return (
)
}
```
### `KeyPressManager`
TODO
---
_Source: https://npm.io/package/react-sunbeam · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
