mirror of
https://github.com/facebook/react.git
synced 2026-02-26 18:58:05 +00:00
65 lines
1.4 KiB
Markdown
65 lines
1.4 KiB
Markdown
# Focus
|
|
|
|
The `useFocus` hook responds to focus and blur events on its child. Focus events
|
|
are dispatched for all input types, with the exception of `onFocusVisibleChange`
|
|
which is only dispatched when focusing with a keyboard.
|
|
|
|
Focus events do not propagate between `useFocus` event responders.
|
|
|
|
```js
|
|
// Example
|
|
const Button = (props) => {
|
|
const [ isFocusVisible, setFocusVisible ] = useState(false);
|
|
const focus = useFocus({
|
|
onBlur={props.onBlur}
|
|
onFocus={props.onFocus}
|
|
onFocusVisibleChange={setFocusVisible}
|
|
});
|
|
|
|
return (
|
|
<button
|
|
children={props.children}
|
|
listeners={focus}
|
|
style={{
|
|
...(isFocusVisible && focusVisibleStyles)
|
|
}}
|
|
>
|
|
);
|
|
};
|
|
```
|
|
|
|
## Types
|
|
|
|
```js
|
|
type FocusEvent = {
|
|
target: Element,
|
|
pointerType: 'mouse' | 'touch' | 'pen' | 'keyboard',
|
|
timeStamp: number,
|
|
type: 'blur' | 'focus' | 'focuschange' | 'focusvisiblechange'
|
|
}
|
|
```
|
|
|
|
## Props
|
|
|
|
### disabled: boolean = false
|
|
|
|
Disables the responder.
|
|
|
|
### onBlur: (e: FocusEvent) => void
|
|
|
|
Called when the element loses focus.
|
|
|
|
### onFocus: (e: FocusEvent) => void
|
|
|
|
Called when the element gains focus.
|
|
|
|
### onFocusChange: boolean => void
|
|
|
|
Called when the element changes focus state (i.e., after `onBlur` and
|
|
`onFocus`).
|
|
|
|
### onFocusVisibleChange: boolean => void
|
|
|
|
Called when the element receives or loses focus following keyboard navigation.
|
|
This can be used to display focus styles only for keyboard interactions.
|