@hozzijeong/react-modal
v0.0.2
Published
React에서 사용가능한 모달입니다.
Readme
React Modal From @hozzijeong
This is simple React Modal Component Library
Installation
npm install @hozzijeong/react-modalComponents
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
<div id="modal-root"> </div>를index.html의body태그 제일 마지막에 추가한다.
<body>
<div id="root"></div>
<div id="modal-root"></div>
</body>- 모달을 공유할 Layout에
<ModalProvider></ModalProvider>를 추가해 줍니다.
import { ModalProvider } from "@hozzijeong/react-modal";
<ModalProvider>{...children}</ModalProvider>;- 그렇다면 다음과 같은 방식으로 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>;isModalOpen은 Context API를 사용해서ModalProvider를 감싼 하위 컴포넌트라면 전역적으로 접근이 가능하다.Modal의
Props는 아래와 같다.
interface ModalProps {
direction?: Direction; // 모달이 열리는 방향 미지정시 "center"
width?: string; // 모달 콘텐츠의 너비 미지정시 100%
height?: string; // 모달 콘텐츠의 높이 미지정시 100%
children: React.ReactNode; // 모달안에 들어갈 자식 컴포넌트
}dependancy
react styled-components typescript