@jaymyong66/simple-modal v0.0.7

Modal

Displays a dialog with a custom content that requires attention or provides additional information. It also provides three modal components that utilize base-modal.

• Alert Modal
• Confirm Modal
• Prompt Modal

• And you can check out the storybook for the modal components at that link!

installation

npm install @jaymyong66/simple-modal

Component spec

🎯 Base Modal

The main component to display a modal.

ModalHeader

The header of the modal.

ModalContent

The body of the modal. (example - checkbox, input, textarea)

ModalFooter

The footer of the modal. (example - buttons)

use example

import { Modal } from '@jaymyong66/simple-modal';

const OtherModal = () => {
  const [isOpen, setIsOpen] = useState(false);
  const handleToggle = () => setIsOpen((prev) => !prev);

  return (
    <Modal position="center" isOpen={isOpen} onToggle={handleToggle}>
      <Modal.ModalHeader title="카드사 선택"></Modal.ModalHeader>
      <Modal.ModalContent>
        <CheckBoxField />
      </Modal.ModalContent>
      <Modal.ModalFooter>
        <ConfirmButton />
      </Modal.ModalFooter>
    </Modal>
  );
};

Features

When the modal opens

• Dimmed outside the modal
• Content behind a modal is inert, meaning that users cannot interact with it.

When the modal closes

• Pressing ESC key closes the modal
• Click dimmed to close

🎯 Alert Modal

A modal that informs the user of a message and has a confirmation button.

use example

import { AlertModal } from '@jaymyong66/simple-modal';

const OtherModal = () => {
  const [isOpen, setIsOpen] = useState(false);
  const handleToggle = () => setIsOpen((prev) => !prev);
  const handleConfirm = () => {
    console.log('confirm');
    handleToggle();
  };

  return (
    <AlertModal
      position="center"
      size="small"
      isOpen={isOpen}
      onToggle={handleToggle}
      onConfirm={handleConfirm}
      title="아이디를 입력해주세요."
      caption="아이디는 필수로 입력해야 합니다."
      confirmButtonLabel="확인"
    />
  );
};

🎯 Confirm Modal

A modal that gives the user a choice and has confirm and cancel buttons

use example

import { ConfirmModal } from '@jaymyong66/simple-modal';

const OtherModal = () => {
  const [isOpen, setIsOpen] = useState(false);
  const handleToggle = () => setIsOpen((prev) => !prev);
  const handleConfirm = () => {
    console.log('confirm');
    handleToggle();
  };

  return (
    <ConfirmModal
      position="center"
      size="small"
      isOpen={isOpen}
      onToggle={handleToggle}
      onConfirm={handleConfirm}
      title="카드를 삭제하시겠습니까?"
      caption="삭제하면 복구하실 수 없습니다."
      confirmButtonLabel="확인"
      confirmButtonLabel="취소"
    />
  );
};

🎯 Prompt Modal

A modal with an input field to receive input from the user and an OK/Cancel button.

use example

import { PromptModal } from '@jaymyong66/simple-modal';

const OtherModal = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [value, setValue] = useState('');
  const handleToggle = () => setIsOpen((prev) => !prev);
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value);
  const handleSubmit = (value: string) => {
    console.log(value);
    handleToggle();
  }

  return (
    <PromptModal
      position="bottom"
      size="medium"
      isOpen={isOpen}
      onToggle={handleToggle}
      title="쿠폰 번호를 입력해 주세요."
      value={value}
      onChange={handleChange}
      onSubmit={handleSubmit}
      confirmButtonLabel="확인"
      confirmButtonLabel="취소"
    />
  );
};