@accessible/use-conditional-focus 中文文档教程
useConditionalFocus()
npm i @accessible/use-conditional-focus
一个将有条件地聚焦元素的 React 钩子。 默认情况下，这将专注于第一个可聚焦的 提供的根元素的子元素，但您也可以选择包含根元素。
Quick Start
```jsx和谐 从“反应”导入*作为反应 import useConditionalFocus
从 '@accessible/use-conditional-focus' const Component = () => {
const ref = React.useRef(null)
const [visible, setVisible] = React.useState(false)
// 聚焦 ref 元素中的第一个可聚焦子元素
// 可见是 true
useConditionalFocus(ref, visible)
返回 (
// This button will be focused when
visible is true
API
useConditionalFocus(target, shouldFocus, options?)
Arguments
| Prop | Type | Default | Required? | Description |
|---|---|---|---|---|
| target | React.RefObject<T> | T | Window | Document | null |
Yes | A React ref, element, window, or document |
|
| shouldFocus | boolean |
false |
Yes | Provide a true value here to focus the first focusable child in the element. |
| options | UseConditionalFocusOptions |
{includeRoot: false, preventScroll: false} |
No | See UseConditionalFocusOptions. |
UseConditonalFocusOptions
| Prop | Type | Default | Required? | Description |
|---|---|---|---|---|
| includeRoot | boolean |
false |
No | When true this will try to focus on the root element in addition to its children. |
| preventScroll | boolean |
false |
No | When true this will prevent your browser from scrolling the document to bring the newly-focused element into view. |
Returns void
LICENSE
麻省理工学院
