useClosableContainer

Hook for managing closable containers like modals, dropdowns, and popovers.

Import

import { useClosableContainer } from "amvasdev-ui";

Signature

useClosableContainer(ref, onClose, options): { isClosing, handleClose }

Parameters

Name	Type	Required	Description
ref	RefObject<HTMLElement>	Yes	Reference to the container element
onClose	() => void	Yes	Callback function to execute when closing
options	ClosableContainerOptions	No	Configuration options for the container

Returns

{ isClosing: boolean; handleClose: () => void }

Object containing closing state and close handler function

Live Demo

Try pressing Escape or clicking outside to close

Examples

Basic Usage with Modal

import { useClosableContainer } from "amvasdev-ui";
import { useRef } from "react";

function MyModal({ onClose }) {
  const ref = useRef(null);
  const { isClosing, handleClose } = useClosableContainer(ref, onClose, {
    closeTimeout: 300,
    closeOnEsc: true,
    closeOnClickOutside: true,
  });

  return (
    <div
      ref={ref}
      className={isClosing ? "animate-fade-out" : "animate-fade-in"}
    >
      <button onClick={handleClose}>Close</button>
      <p>Modal content</p>
    </div>
  );
}

Dropdown Example

import { useClosableContainer } from "amvasdev-ui";
import { useRef, useState } from "react";

function Dropdown() {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef(null);

  const { isClosing, handleClose } = useClosableContainer(
    dropdownRef,
    () => setIsOpen(false),
    {
      closeTimeout: 200,
      closeOnEsc: true,
      closeOnClickOutside: true,
    }
  );

  return (
    <div ref={dropdownRef}>
      <button onClick={() => setIsOpen(true)}>Toggle</button>
      {isOpen && (
        <div className={isClosing ? "animate-fade-out" : "animate-fade-in"}>
          <ul>
            <li onClick={handleClose}>Option 1</li>
            <li onClick={handleClose}>Option 2</li>
          </ul>
        </div>
      )}
    </div>
  );
}

Options

Notes

closeTimeout: Animation duration before calling onClose (default: 280ms)
closeOnEsc: Close when Escape key is pressed (default: true)
closeOnClickOutside: Close when clicking outside (default: true)