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

import { DismissableLayer } from '@ryvora/react-dismissable-layer';
import React, { useState } from 'react';

function MyPopup() {
  const [isOpen, setIsOpen] = useState(false);

  if (!isOpen) {
    return <button onClick={() => setIsOpen(true)}>Open Popup</button>;
  }

  return (
    <DismissableLayer onDismiss={() => setIsOpen(false)}>
      <div>
        <p>I am a popup! Click outside or press Esc to close me.</p>
        <button onClick={() => setIsOpen(false)}>Close Manually</button>
      </div>
    </DismissableLayer>
  );
}

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