open-index/open-npm huggingface dataset:
npm package: @hozzijeong/react-modal
Description: React에서 사용가능한 모달입니다.
Latest version: 0.0.2

# React Modal From @hozzijeong

This is simple React Modal Component Library

## Installation

```cmd
  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.html`의 `body` 태그 제일 마지막에 추가한다.

```html
<body>
  <div id="root"></div>
  <div id="modal-root"></div>
</body>
```

2. 모달을 공유할 Layout에 `<ModalProvider></ModalProvider>`를 추가해 줍니다.

```tsx
import { ModalProvider } from "@hozzijeong/react-modal";

<ModalProvider>{...children}</ModalProvider>;
```

3. 그렇다면 다음과 같은 방식으로 modal을 사용할 수 있다.

```tsx
// ...
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>;
```

4. `isModalOpen`은 Context API를 사용해서 `ModalProvider`를 감싼 하위 컴포넌트라면 전역적으로 접근이 가능하다.

5. Modal의 `Props`는 아래와 같다.

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

---

## dependancy

`react` `styled-components` `typescript`