@kwgon0102/react-mydal v1.0.3

@kwgon0102/react-mydal

React Custom Modal Component

Features

• 🎯 다양한 위치 설정 (center, top-center, top-left, top-right, bottom-center, bottom-left, bottom-right)
• 🎨 커스텀 스타일링 (모달, 배경, 닫기 버튼)
• ⌨️ ESC 키로 닫기
• 🖱️ 외부 클릭으로 닫기
• ❌ 커스텀 닫기 버튼 (내부/외부 위치 선택)
• 🎨 닫기 버튼 스타일 커스터마이징 (크기, 색상, 아이콘)

Installation

npm install @kwgon0102/react-mydal

Usage

import { Modal } from "@kwgon0102/react-mydal";

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

  const options = {
    isOpen,
    onClose: setIsOpen,
    position: "center",
    onEsc: true,
    onOutsideClick: true,
    closeButton: "inside",
    closeButtonStyle: {
      width: 20,
      height: 20,
      color: "red",
      icon: <div>닫기</div>,
    },
    modalStyle: {
      backgroundColor: "yellowgreen",
    },
  };

  return (
    <Modal {...options}>
      <div>모달 내용</div>
    </Modal>
  );
}

Examples

다양한 위치 설정

// 상단 중앙
<Modal isOpen={isOpen} onClose={setIsOpen} position="top-center">
  상단 중앙 모달
</Modal>

// 우측 하단
<Modal isOpen={isOpen} onClose={setIsOpen} position="bottom-right">
  우측 하단 모달
</Modal>

커스텀 스타일링

<Modal
  isOpen={isOpen}
  onClose={setIsOpen}
  backdropStyle={{
    backgroundColor: "rgba(0, 0, 0, 0.7)",
    backdropFilter: "blur(5px)",
  }}
  modalStyle={{
    maxWidth: "800px",
    background: "#f5f5f5",
    boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
  }}
>
  커스텀 스타일 모달
</Modal>

커스텀 닫기 버튼

<Modal
  isOpen={isOpen}
  onClose={setIsOpen}
  closeButton="outside"
  closeButtonStyle={{
    width: 30,
    height: 30,
    color: "#ff0000",
    icon: <span>✕</span>,
  }}
>
  커스텀 닫기 버튼 모달
</Modal>

ESC 키와 외부 클릭 비활성화

<Modal isOpen={isOpen} onClose={setIsOpen} onEsc={false} onOutsideClick={false}>
  수동으로만 닫을 수 있는 모달
</Modal>

Props

License

MIT