useModal

import { useModal } from "@refinedev/core";

const MyComponent = () => {
  const { visible, show, close } = useModal();

  return (
    <>
      <button onClick={show}>Open Modal</button>
      {visible && (
        <div className="modal">
          <h2>Modal Content</h2>
          <button onClick={close}>Close</button>
        </div>
      )}
    </>
  );
};

import { useModal } from "@refinedev/core";

const BasicModal = () => {
  const { visible, show, close } = useModal();

  return (
    <div>
      <button onClick={show}>Open Modal</button>

      {visible && (
        <div className="modal-overlay">
          <div className="modal-content">
            <h2>Modal Title</h2>
            <p>Modal content goes here</p>
            <button onClick={close}>Close</button>
          </div>
        </div>
      )}
    </div>
  );
};

import { useModal } from "@refinedev/core";

const WelcomeModal = () => {
  const { visible, close } = useModal({ defaultVisible: true });

  return (
    visible && (
      <div className="modal">
        <h2>Welcome!</h2>
        <p>Thank you for visiting our application.</p>
        <button onClick={close}>Get Started</button>
      </div>
    )
  );
};

import { useModal } from "@refinedev/core";

const DeleteButton = ({ onDelete }) => {
  const { visible, show, close } = useModal();

  const handleConfirm = () => {
    onDelete();
    close();
  };

  return (
    <>
      <button onClick={show}>Delete</button>

      {visible && (
        <div className="modal">
          <h3>Confirm Deletion</h3>
          <p>Are you sure you want to delete this item?</p>
          <div>
            <button onClick={handleConfirm}>Yes, Delete</button>
            <button onClick={close}>Cancel</button>
          </div>
        </div>
      )}
    </>
  );
};

import { useModal } from "@refinedev/core";
import { useState } from "react";

const CreateUserModal = () => {
  const { visible, show, close } = useModal();
  const [formData, setFormData] = useState({ name: "", email: "" });

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Submitting:", formData);
    close();
  };

  return (
    <>
      <button onClick={show}>Create User</button>

      {visible && (
        <div className="modal">
          <h2>Create New User</h2>
          <form onSubmit={handleSubmit}>
            <input
              type="text"
              placeholder="Name"
              value={formData.name}
              onChange={(e) =>
                setFormData({ ...formData, name: e.target.value })
              }
            />
            <input
              type="email"
              placeholder="Email"
              value={formData.email}
              onChange={(e) =>
                setFormData({ ...formData, email: e.target.value })
              }
            />
            <div>
              <button type="submit">Create</button>
              <button type="button" onClick={close}>
                Cancel
              </button>
            </div>
          </form>
        </div>
      )}
    </>
  );
};

import { useModal } from "@refinedev/core";

const MultiModalExample = () => {
  const editModal = useModal();
  const deleteModal = useModal();

  return (
    <div>
      <button onClick={editModal.show}>Edit</button>
      <button onClick={deleteModal.show}>Delete</button>

      {editModal.visible && (
        <div className="modal">
          <h2>Edit Item</h2>
          <button onClick={editModal.close}>Close</button>
        </div>
      )}

      {deleteModal.visible && (
        <div className="modal">
          <h2>Delete Item</h2>
          <button onClick={deleteModal.close}>Cancel</button>
        </div>
      )}
    </div>
  );
};

import { useModal } from "@refinedev/core";

const ModalWithOverlay = () => {
  const { visible, show, close } = useModal();

  const handleOverlayClick = (e) => {
    if (e.target === e.currentTarget) {
      close();
    }
  };

  return (
    <>
      <button onClick={show}>Open Modal</button>

      {visible && (
        <div className="modal-overlay" onClick={handleOverlayClick}>
          <div className="modal-content">
            <h2>Click outside to close</h2>
            <p>Or use the button below</p>
            <button onClick={close}>Close</button>
          </div>
        </div>
      )}
    </>
  );
};

import { useModal } from "@refinedev/core";
import { useEffect } from "react";

const ModalWithEscape = () => {
  const { visible, show, close } = useModal();

  useEffect(() => {
    const handleEscape = (e) => {
      if (e.key === "Escape" && visible) {
        close();
      }
    };

    document.addEventListener("keydown", handleEscape);
    return () => document.removeEventListener("keydown", handleEscape);
  }, [visible, close]);

  return (
    <>
      <button onClick={show}>Open Modal</button>

      {visible && (
        <div className="modal">
          <h2>Press ESC to close</h2>
          <button onClick={close}>Close</button>
        </div>
      )}
    </>
  );
};

export type useModalProps = {
  defaultVisible?: boolean;
};

export type useModalReturnType = {
  visible: boolean;
  show: () => void;
  close: () => void;
};