useFocusWithin
Monitor whether the current focus is within a certain area, Same as css attribute :focus-within.
Examples
Default usage
isFocusWithin:false
Basic usage
Use useRef to set area that needs monitoring. The focus can be switched by click the outside with the mouse, or using keys such as `tab` on the keyboard.
Pass in DOM element
isFocusWithin:false
Pass in DOM element
Pass in a function that returns the DOM element.
API
const isFocusWithin = useFocusWithin( target, { onFocus, onBlur, onChange });
const isFocusWithin = useFocusWithin( target, { onFocus, onBlur, onChange });
Params
| Property | Description | Type | Default |
|---|---|---|---|
| target | DOM element | () => Element | Element | - |
| options | More config | Options | - |
Options
| Property | Description | Type | Default |
|---|---|---|---|
| onFocus | Callback to be executed on focus | (e: FocusEvent) => void | - |
| onBlur | Callback to be executed on blur | (e: FocusEvent) => void | - |
| onChange | Callback to be executed on focus change | (isFocusWithin: boolean) => void | - |
Result
| Property | Description | Type |
|---|---|---|
| isFocusWithin | Whether the focus is in the current area | Accessor<boolean> |