react-modal-hp
v0.1.11
Published
Simple React Modal
Downloads
24
Readme
React Modal HP
Modal Component with React and Typescript.
리액트와 타입스크립트를 사용한 모달 컴포넌트.
Installation
In React App
# use npm
npm install react-modal-hp
#use yarn
yarn add react-modal-hpBefore Use
Before use, create a root div for the modal in public/index.html.
사용 전 public/index.html에 모달의 root div를 생성해주세요.
<!-- public/index.html -->
<head>
<title>Your React Project</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- Add the following code to create a root div for the modal. -->
<!-- 이 부분에 아래와 같이 작성해주세요. -->
<div id="modal-root"></div>
</body>Modal && useModal
Import
import Modal from 'react-modal-hp';import { useModal } from 'react-modal-hp';Example
import Modal, { useModal } from 'react-modal-hp';
// Get the portal element using the ID of the root div you created earlier.
// 위에서 생성한 root div의 id 값으로 portal을 가져옵니다.
const portal = document.getElementById('modal-root') as HTMLDivElement;
function App() {
// The useModal hook is used to manipulate the modal.
// 모달을 조작할 수 있는 hook 입니다.
const { isOpen, openModal, closeModal } = useModal();
return (
<>
<button onClick={openModal}>open</button>
<Modal open={isOpen} onClose={closeModal} portal={portal}>
Write Your Modal Content Here
</Modal>
</>
);
}Modal Props
| Attribute | Type | Description | Default | | :-------: | :----------------------: | :----------------------------------------------------------------------- | :------: | | open | boolean | Indicates whether the modal is open or closed모달이 열고 닫힌 상태 | | | onClose | () => void | A function to close the modal모달을 닫는 함수 | | | position | ModalPosition ('bottom') | The position of the modal모달의 위치 | 'bottom' | | animation | boolean | undefined | Whether the modal should have an animation모달 애니메이션 유무 | | | portal | Element | The root element of the modal모달의 root가 되는 엘리먼트 | | | children | React.ReactNode | The contents of the modal모달 내부의 컨텐츠 | |
type ModalPosition = 'bottom';useModal Type
| Property | Type | Description | Initial | | ---------- | ---------- | ------------------------------------------------------------------------ | ------- | | isOpen | boolean | Indicates whether the modal is open or closed모달의 열고 닫힌 상태 | false | | openModal | () => void | A function to update isOpen to trueisOpen을 true로 업데이트 | | | closeModal | () => void | A function to update isOpen to falseisOpen을 false로 업데이트 | |
useModalContext
A hook used in the modal content.
모달 컨텐츠에서 사용하는 hook.
The close function can be used inside.
내부에서 모달 닫기 메서드를 사용할 수 있다.
Import
import { useModalContext } from 'react-modal-hp';Example
import { useModalContext } from 'react-modal-hp';
function ModalContent() {
const { close } = useModalContext();
const onClose = () => {
// Perform the desired logic before closing.
// 모달이 닫히기 전 로직을 작성해서 사용.
close();
};
return (
<div>
<button onClick={onClose}>close</button>
<p>Hi. This is Modal</p>
</div>
);
}Types
| Property | Type | Description | | -------- | ---------- | ---------------------------------------------------- | | close | () => void | A function to close the modal.모달을 닫는 함수 |