Focus
API reference for the focus system
The focus system provides components and hooks for managing keyboard navigation.
import { FocusGroup, useFocus, useFocusState } from 'giggles';
function Menu() {
return (
<FocusGroup direction="vertical">
<MenuItem label="Option 1" />
<MenuItem label="Option 2" />
<MenuItem label="Option 3" />
</FocusGroup>
);
}
function MenuItem({ label }) {
const focus = useFocus();
return <Text color={focus.focused ? 'green' : 'white'}>{label}</Text>;
}API Reference
useFocus()
Returns focus state and methods for a component.
Returns:
Prop
Type
FocusGroup
Creates a navigable group of focusable children.
Prop
Type
useFocusState()
Returns a state tuple for controlling focus declaratively.
function useFocusState<T extends string>(initial: T): [T, (value: T) => void]Prop
Type
Returns: A tuple [currentValue, setValue] similar to useState.