useClickOutside

特定の要素の外側のクリックを検出します。

インポート#


import { useClickOutside } from 'primereact/hooks';

基本#

ボタンをクリックしてポップアップを表示し、外側をクリックして非表示にします。


<div className="relative">
    <Button onClick={() => setVisible(true)} label="Show" />
    {visible ? (
        <div ref={overlayRef} className="absolute border-round shadow-2 p-5 surface-overlay z-2 white-space-nowrap scalein origin-top">
            Popup Content
        </div>
    ) : null}
</div>