useFocus
Respond to focus interactions
Listen to changes in the “focus” state of the element.
import { useFocus } from 'react-gui/use-focus';
const ref = useFocus(focusProps);
API #
Return value #
useFocus
returns a React callback ref.
ref (?HTMLElement) => void
A callback ref that must be passed to the target element.
FocusProps #
disabled boolean
Disable the hook.
onBlur (event: FocusEvent) => void
Called when the target dispatches a blur
event.
onBlurCapture (event: FocusEvent) => void
Called during the capture phase of a blur
event.
onFocus (event: FocusEvent) => void
Called when the target dispatches a focus
event.
onFocusCapture (event: FocusEvent) => void
Called during the capture phase of a focus
event.
onFocusChange (focused: boolean) => void
Called when the focus state of the element changes.
FocusEvent #
The W3C FocusEvent
relatedTarget boolean
The relatedTarget is the secondary target of the event. In some cases (such as when tabbing in or out a page), this property may be set to null for security reasons.
Examples #
Use onFocusChange
as a convenient way to listen to changes in the focus state.
import useFocus from 'react-gui/use-focus';
function useFocusState(): [ref, boolean] {
const [focused, onFocusChange] = React.useState(false);
const ref = useFocus({ onFocusChange });
return [ref, focused];
}