useOutsideClick
useOutsideClick
は、要素の外側のクリックイベントを検出するカスタムフックです。
インポート
import { useOutsideClick } from "@yamada-ui/react"
使い方
編集可能な例
const ref = useRef<HTMLDivElement>(null) const [isOpen, setIsOpen] = useState(false) useOutsideClick({ ref, handler: () => setIsOpen(false), }) return ( <> {isOpen ? ( <Center ref={ref} h="10" px="4" bg="danger" color="white" rounded="md"> Hey, Click anywhere outside of me to close. </Center> ) : ( <Button onClick={() => setIsOpen(true)}>Please Click</Button> )} </> )
GitHubでこのページを編集する