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];
}
Updated
Edit
React GUICopyright © Facebook Inc.