条件焦点( )
npm i @accessible/use-conditional-focus
反应钩,将有条件地聚焦元素. 默认情况下, 它将聚焦于第一个可聚焦 根元素的子项目,但也可以选择包括根.
快速启动
import * as React from 'react'
import useConditionalFocus from '@accessible/use-conditional-focus'
const Component = () => {
const ref = React.useRef(null)
const [visible, setVisible] = React.useState(false)
// Focuses the first focusable child in the `ref` element when
// visible is `true`
useConditionalFocus(ref, visible)
return (
<div>
<div ref={ref}>
// This button will be focused when `visible` is true
<button onClick={() => setVisible(false)}>Close me</button>
</div>
<button onClick={() => setVisible(true)}>Click me</button>
</div>
)
}
API 密码
使用有条件焦点( 目标, 是否应该焦点, 选项 )
参数
| Prop | 类型 | 默认 | 需要吗? | 说明 |
|---|---|---|---|---|
| 目标 | React.RefObject<T> | T | Window | Document | null | 对 | 反应参考,元素, window,或 document | |
| 应聚焦 | boolean | false | 对 | 提供a true 值在此聚焦元素中的第一个可聚焦的孩子. |
| 选项 | UseConditionalFocusOptions | {includeRoot: false, preventScroll: false} | 没有 | 见 UseConditionalFocusOptions。 。 。 . |
UseConditonalFocusOptions
| Prop | 类型 | 默认 | 需要吗? | 说明 |
|---|---|---|---|---|
| 包含旋转 | boolean | false | 没有 | 何时 true 除了儿童之外,这将努力把重点放在根本因素上. |
| 防止滚动 | boolean | false | 没有 | 何时 true 这将防止您的浏览器滚动文档,使新聚焦的元素进入视图. |
回返 void
自由主义
麻省理工学院