@jinyyy/simple-modal v0.0.21

Modal

Displays a dialog with a custom content that requires attention or provides additional information.

installation

npm install @jinyyy/simple-modal

Component spec

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)

ModalCloseButton

Buttons used within a modal footer.

ModalButton

Buttons for use in modal footer

ModalInput

Input for use in modal content

ModalLabel

label for use in modal content

AlertModal

Modals that convey a message to the user and only provide an confirm button

ConfirmModal

Modals that give users choices and provide confirm/cancel button

PromptModal

Modal that provides an input field to receive input from the user and an confirm/cancel button

use example

Modal

import React from 'react';
import { Modal } from '@jinyyy/simple-modal';

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

  return (
    <div className="app">
      <Modal position="bottom" isOpen={isOpen} onToggle={handleToggle}>
        <Modal.ModalHeader title="약관에 동의해 주세요" />
        <Modal.ModalContent style={{ margin: '12px 0px' }}>
          <div style={{ height: '300px', width: '100%', backgroundColor: 'black' }} />
        </Modal.ModalContent>
        <Modal.ModalFooter direction="row">
          <Modal.ModalButton onClick={args.onToggle} color="primary">
            동의하고 저장하기
          </Modal.ModalButton>
          <Modal.ModalButton onClick={args.onToggle} color="secondary">
            닫기
          </Modal.ModalButton>
        </Modal.ModalFooter>
      </Modal>
    </div>
  );
};

AlertModal

import React from 'react';
import { AlertModal } from '@jinyyy/simple-modal';

function App() {
  const [isOpen, setIsOpen] = React.useState(false);
  const handleToggle = () => setIsOpen((prev) => !prev);

  return (
    <div style={{ height: '100vh', width: 'width: 600px', margin: 'auto' }}>
      <AlertModal
        position="bottom"
        isOpen={isOpen}
        onToggle={handleToggle}
        title="아이디를 입력해주세요."
        contentLabel="아이디는 필수로 입력해야 합니다."
      />

      <button onClick={handleToggle}>모달 클릭!</button>
    </div>
  );
}

export default App;

ConfirmModal

import React from 'react';
import { ConfirmModal } from '@jinyyy/simple-modal';

function App() {
  const [isOpen, setIsOpen] = React.useState(false);
  const handleToggle = () => setIsOpen((prev) => !prev);

  return (
    <div style={{ height: '100vh', width: '600px', margin: 'auto' }}>
      <ConfirmModal
        position="center"
        isOpen={isOpen}
        onToggle={handleToggle}
        title="아이디를 입력해주세요."
        onConfirm={handleToggle}
      >
        <p style={{ fontSize: '12px', fontWeight: '500', lineHeight: '16px' }}>삭제하면 복구하실 수 없습니다.</p>
      </ConfirmModal>
      <button onClick={handleToggle}>모달 클릭!</button>
    </div>
  );
}

export default App;

PromptModal

import React from 'react';
import { PromptModal } from '@jinyyy/simple-modal';

function App() {
  const [isOpen, setIsOpen] = React.useState(false);
  const handleToggle = () => setIsOpen((prev) => !prev);

  return (
    <div style={{ height: '100vh', width: '600px', margin: 'auto' }}>
      <PromptModal
        position="center"
        isOpen={isOpen}
        onToggle={handleToggle}
        title="쿠폰 번호를 입력해 주세요."
        onConfirm={handleToggle}
      />
      <button onClick={handleToggle}>모달 클릭!</button>
    </div>
  );
}

export default App;

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