useRootClose

const ref = useRef();
const [show, setShow] = useState(false);
const handleRootClose = () => setShow(false);
useRootClose(ref, handleRootClose, {
  disabled: !show,
});
return (
  <div className="flex flex-col items-center">
    <button
      type="button"
      className="btn"
      onClick={() => setShow(true)}
    >
      Render RootCloseWrapper
    </button>
    {show && (
      <div
        ref={ref}
        className="rounded shadow bg-white p-6"
      >
        <span>Click anywhere to dismiss me!</span>
      </div>
    )}
  </div>
);

#API

• #

  useRootClose(ref: Ref<HTMLElement> | HTMLElement, onRootClose: function, options?: object) => void

  The useRootClose hook registers your callback on the document when rendered. Powers the <Overlay/> component. This is used achieve modal style behavior where your callback is triggered when the user tries to interact with the rest of the document or hits the esc key.

  Parameters

  • refRef<HTMLElement> | HTMLElement

    The element boundary

  • onRootClosefunction
  • options?object
    • disabled?boolean
    • clickTrigger?string

      The DOM event name (click, mousedown, etc) to attach listeners on