Dismissable Layer 💨

Ahoy, Escape Artist! Houdini in the house! 🎩🐇

The dismissable-layer module is a clever helper for components like popovers, dialogs, or dropdowns. It creates a layer that, when interacted with outside of its content (e.g., clicking outside, pressing the Escape key), can trigger a dismiss action.

It's like an invisible force field that knows when you're trying to leave! 🛡️

Key Features

• 🖱️ Pointer Down Outside: Detects clicks/taps outside the main content.
• ⌨️ Escape Key: Listens for the Escape key to dismiss.
• 🧠 Focus Outside: Can detect if focus moves outside the layer.
• 🚫 Disabling Interaction: Can prevent interaction with elements outside the layer (useful for modals).

Conceptual Usage

1import { DismissableLayer } from '@ryvora/react-dismissable-layer';
2import React, { useState } from 'react';
3
4function MyPopup() {
5  const [isOpen, setIsOpen] = useState(false);
6
7  if (!isOpen) {
8    return <button onClick={() => setIsOpen(true)}>Open Popup</button>;
9  }
10
11  return (
12    <DismissableLayer onDismiss={() => setIsOpen(false)}>
13      <div>
14        <p>I am a popup! Click outside or press Esc to close me.</p>
15        <button onClick={() => setIsOpen(false)}>Close Manually</button>
16      </div>
17    </DismissableLayer>
18  );
19}

Now you see it, now you don't! ✨ Perfect for those "poof, it's gone!" moments.