焦点文字
陷阱键盘聚焦在 DOM 元素内,以防止用户在模式外导航.
在使用此选项时, 请确保将其与固定位置结合 <Backdrop> 以阻止鼠标单击输入元素.
检查 故事书 演示.
安装
yarn add @charlietango/use-focus-trap
API 密码
const ref = useFocusTrap(active, options)
这个 useFocusTrap 钩子返回 a ref 您应该指定 DOM 元素,该元素需要锁定焦点.
除了这个元素之外,任何因素都不再能够集中.
您可以通过设置 active 布尔。 默认一旦 ref 指定.
选项
焦点陷阱接受一个带有这些可选选项的对象,这可以让你得到更多的控制.
| 名称 | 类型 | 默认 | 需求 | 说明 |
|---|---|---|---|---|
| 焦点选择器 | string 编号 : HTMLElement | undefined | 虚假 | 启动时将焦点指定为匹配此选择器的元素 - 或您提供的特定元素 。 默认焦点将设定为第一个有效的标签目标 . |
| 已禁用 AriaHider | boolean | false | 虚假 | 禁用设置 aria-hidden 内的其他要素 document.body 当陷阱正在激活时. |
示例
import React from 'react'
import useFocusTrap from '@charlietango/use-focus-trap'
const Component = () => {
const ref = useFocusTrap()
return (
<div ref={ref}>
<button>Trapped to the button</button>
</div>
)
}
export default Component
创建模式
当使用这个钩子创建出一个Modal时,你还需要处理一些事情,这超出了这个钩子的范围:
- 陷阱焦点
- 越狱时关闭
- 点击背景关闭
基数Modal.tsx
这是创建 <Modal />它收到一个 onRequestClose 方法,
,可以被触发来告诉包含的组件更新它状态关闭模式.
它没有包含 <Backdrop />,但这将是一个绝对位置部分
当点击触发时 onRequestClose 方法.
import React, { useEffect } from 'react'
import ReactDOM from 'react-dom'
import useFocusTrap from '@charlietango/use-focus-trap'
import styled from 'styled-components'
type Props = {
onRequestClose?: () => void
children?: React.ReactNode
isOpen: boolean
className?: string
}
const Wrapper = styled.div`
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 5;
`
function BaseModal({ children, isOpen, onRequestClose, className }: Props) {
const ref = useFocusTrap()
function handleKeyDown(event: KeyboardEvent) {
if (event.key === 'Escape') {
if (onRequestClose) onRequestClose()
}
}
useEffect(() => {
if (isOpen) {
document.addEventListener('keydown', handleKeyDown)
return () => {
document.removeEventListener('keydown', handleKeyDown)
}
}
return
}, [isOpen])
const modal = (
<Wrapper
ref={ref}
style={{ pointerEvents: !isOpen ? 'none' : undefined }}
role="dialog"
className={className}
>
{children}
</Wrapper>
)
return ReactDOM.createPortal(modal, window.document.body)
}
BaseModal.displayName = 'BaseModal'
BaseModal.defaultProps = {}
export default BaseModal