0.0.2 • Published 2 years ago

@hozzijeong/react-modal v0.0.2

Weekly downloads
-
License
-
Repository
-
Last release
2 years ago

React Modal From @hozzijeong

This is simple React Modal Component Library

Installation

  npm install @hozzijeong/react-modal

Components

Modal : Component that Modal Content

ModalContext : Modal Open State.

ModalProvider : Modal Layout. you have to 감싸야한다. ModalContext를 사용하기 위해서는.

useModal : custom hook that Modal Open And Close

How to Use

  1. <div id="modal-root"> </div>index.htmlbody 태그 제일 마지막에 추가한다.
<body>
  <div id="root"></div>
  <div id="modal-root"></div>
</body>
  1. 모달을 공유할 Layout에 <ModalProvider></ModalProvider>를 추가해 줍니다.
import { ModalProvider } from "@hozzijeong/react-modal";

<ModalProvider>{...children}</ModalProvider>;
  1. 그렇다면 다음과 같은 방식으로 modal을 사용할 수 있다.
// ...
const { openModal, isModalOpen, closeModal } = useModal();

<div>
  <button onClick={openModal}>{`open modal`}</button>
  {isModalOpen && ( // 조건부 렌더링을 통해 modal을 렌더링 할지 말지 결정한다.
    <Modal direction={direction}>
      <div>this is modal</div>
      <button onClick={closeModal}>close</button>
    </Modal>
  )}
</div>;
  1. isModalOpen은 Context API를 사용해서 ModalProvider를 감싼 하위 컴포넌트라면 전역적으로 접근이 가능하다.

  2. Modal의 Props는 아래와 같다.

interface ModalProps {
  direction?: Direction; // 모달이 열리는 방향 미지정시 "center"
  width?: string; // 모달 콘텐츠의 너비 미지정시 100%
  height?: string; // 모달 콘텐츠의 높이 미지정시 100%
  children: React.ReactNode; // 모달안에 들어갈 자식 컴포넌트
}

dependancy

react styled-components typescript