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.

| prop name | type | default value | description | | --------- | ----------------------------------- | ------------- | ------------------------------------------------ | | children | ReactNode | | Children of the modal component | | isOpen | boolean | | The state of the modal being open or closed | | onToggle | () => void | | Handler function to toggle modal | | position | 'center' \| 'bottom' | 'center' | Position of the modal on display | | device | 'mobile' \| 'tablet' \| 'desktop' | 'mobile' | serving responsive modal backdrop sizes | | size | 'small' \| 'medium' \| 'large' | 'small' | serving responsive modal sizes | | style | React.CSSProperties | | How to define inline CSS in React | | className | string | | How to use class names for DOM elements in React |

ModalHeader

The header of the modal.

| prop name | type | default value | description | | --------- | --------------------- | ------------- | ------------------------------------------------ | | children | ReactNode | | Children of ModalHeader component | | title | string | | Title of the modal | | style | React.CSSProperties | | How to define inline CSS in React | | className | string | | How to use class names for DOM elements in React |

ModalContent

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

| prop name | type | default value | description | | --------- | --------------------- | ------------- | ------------------------------------------------ | | children | ReactNode | | Children of ModalContent component | | style | React.CSSProperties | | How to define inline CSS in React | | className | string | | How to use class names for DOM elements in React |

ModalFooter

The footer of the modal. (example - buttons)

| prop name | type | default value | description | | --------- | --------------------- | ------------- | ------------------------------------------------ | | children | ReactNode | | Children of ModalFooter component | | direction | 'column' \| 'row' | 'row' | Flex direction of the footer | | style | React.CSSProperties | | How to define inline CSS in React | | className | string | | How to use class names for DOM elements in React |

ModalCloseButton

Buttons used within a modal footer.

| prop name | type | default value | description | | --------- | -------------------------------------------- | ------------- | ------------------------------------------------ | | onClick | React.MouseEventHandler<HTMLButtonElement> | | Handlers for closing modals | | type | 'submit' \| 'button' \| 'reset' | | button type | | style | React.CSSProperties | | How to define inline CSS in React | | className | string | | How to use class names for DOM elements in React |

ModalButton

Buttons for use in modal footer

| prop name | type | default value | description | | --------- | -------------------------------------------- | ------------- | ------------------------------------------------ | | children | ReactNode | | Children of ModalButton component | | color | 'primary' \| 'secondary' \| 'danger' | 'primary' | Determine the background color of the button | | onClick | React.MouseEventHandler<HTMLButtonElement> | | Handlers for closing and confirm modals | | style | React.CSSProperties | | How to define inline CSS in React | | className | string | | How to use class names for DOM elements in React |

ModalInput

Input for use in modal content

| prop name | type | default value | description | | --------- | -------------------------------------------- | ------------- | ------------------------------------------------ | | value | ReactNode | | Children of ModalButton component | | onChange | React.ChangeEventHandler<HTMLInputElement> | | Handlers for handling of change value | | style | React.CSSProperties | | How to define inline CSS in React | | className | string | | How to use class names for DOM elements in React |

ModalLabel

label for use in modal content

| prop name | type | default value | description | | --------- | --------------------- | ------------- | ------------------------------------------------ | | children | ReactNode | | Children of ModalLabel component | | style | React.CSSProperties | | How to define inline CSS in React | | className | string | | How to use class names for DOM elements in React |

AlertModal

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

| prop name | type | default value | description | | ----------------- | --------------------- | ------------- | ------------------------------------------------ | | title | string | | title of alert modal | | contentLabel | string | | content label of alert modal | | confirmButtonText | string | | confirm button text of alert modal | | style | React.CSSProperties | | How to define inline CSS in React | | className | string | | How to use class names for DOM elements in React |

ConfirmModal

Modals that give users choices and provide confirm/cancel button

| prop name | type | default value | description | | ----------------- | --------------------- | ------------- | ------------------------------------------------ | | children | ReactNode | | Children of ModalLabel component | | title | string | | title of confirm modal | | contentLabel | string | | content label of confirm modal | | cancelButtonText | string | | cancel button text of confirm modal | | confirmButtonText | string | | confirm button text of confirm modal | | style | React.CSSProperties | | How to define inline CSS in React | | className | string | | How to use class names for DOM elements in React |

PromptModal

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

| prop name | type | default value | description | | ----------------- | --------------------- | ------------- | ------------------------------------------------ | | title | string | | title of confirm modal | | contentLabel | string | | content label of confirm modal | | cancelButtonText | string | | cancel button text of confirm modal | | confirmButtonText | string | | confirm button text of confirm modal | | style | React.CSSProperties | | How to define inline CSS in React | | className | string | | How to use class names for DOM elements in React |

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