Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

useOutsideClick

useOutsideClickは、要素の外側のクリックイベントを検出するカスタムフックです。

ソース@yamada-ui/use-outside-click

インポート

import { useOutsideClick } from "@yamada-ui/react"
Copied!

使い方

編集可能な例

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>
    )}
  </>
)
Copied!

GitHubでこのページを編集する

useOSusePrevious