### npm Start Script

Source: https://github.com/reactleaf/modal/blob/main/examples/with-cra/README.md

Runs the React application in development mode. It opens the app in a browser at http://localhost:3000 and enables hot reloading for changes. Console output will display linting errors.

```bash
npm start
```

--------------------------------

### npm Run Build Script

Source: https://github.com/reactleaf/modal/blob/main/examples/with-cra/README.md

Builds the React application for production deployment. It optimizes the build by minifying code and including content hashes in filenames for efficient caching.

```bash
npm run build
```

--------------------------------

### npm Test Script

Source: https://github.com/reactleaf/modal/blob/main/examples/with-cra/README.md

Launches the test runner for the React application in an interactive watch mode. This script is used for running tests and provides feedback on test results.

```bash
npm test
```

--------------------------------

### Install @reactleaf/modal

Source: https://github.com/reactleaf/modal/blob/main/README-ko.md

Installs the @reactleaf/modal package using npm or yarn.

```sh
npm install @reactleaf/modal
# 또는
yarn add @reactleaf/modal
```

--------------------------------

### npm Run Eject Script

Source: https://github.com/reactleaf/modal/blob/main/examples/with-cra/README.md

Performs a one-way operation to eject the project from Create React App's default configuration. This provides full control over build tools like Webpack, Babel, and ESLint by copying their configurations into the project.

```bash
npm run eject
```

--------------------------------

### ModalProvider Setup

Source: https://github.com/reactleaf/modal/blob/main/README.md

Shows how to provide the modal register to your application using the ModalProvider component. This makes modal context available throughout the app.

```tsx
import { ModalProvider } from "@reactleaf/modal";
import register from "./modals/register";

function App() {
  ...
  return <ModalProvider register={register}>{...}</ModalProvider>
}
```

--------------------------------

### Install @reactleaf/modal

Source: https://github.com/reactleaf/modal/blob/main/README.md

Installs the @reactleaf/modal package using either npm or yarn.

```sh
npm install @reactleaf/modal
# or
yarn add @reactleaf/modal
```

--------------------------------

### Modal Register Example

Source: https://github.com/reactleaf/modal/blob/main/README.md

Demonstrates how to create a modal register using dynamic imports for code-splitting. Registered modals are loaded only when opened, reducing initial bundle size.

```typescript
const register = {
  Alert: () => import("./Alert"),
  Confirm: () => import("./Confirm"),
};

export default register;
```

--------------------------------

### Modal Animation Styling (CSS)

Source: https://github.com/reactleaf/modal/blob/main/README-ko.md

Provides CSS examples for implementing modal opening and closing animations using opacity and transitions. The `.visible` class is key for showing the modal with animation.

```css
.modal-overlay {
  opacity: 0;
  transition: opacity 0.3s;
}
.modal-overlay.visible {
  opacity: 1;
}
```

```css
.slideup {
  transition: transform 500ms;
  transform: translateY(100%);
}

.slideup.visible {
  transform: translateY(0);
}
```

--------------------------------

### Modal Register Example

Source: https://github.com/reactleaf/modal/blob/main/README-ko.md

Defines a modal register object using dynamic imports for lazy loading modal components. This helps reduce initial bundle size.

```typescript
const register = {
  Alert: () => import("./Alert"),
  Confirm: () => import("./Confirm"),
};

export default register;
```

--------------------------------

### Basic Modal Implementation

Source: https://github.com/reactleaf/modal/blob/main/README.md

Demonstrates how to implement a modal component using the injected `close` function and `visible` boolean prop provided by the `@reactleaf/modal` library. This example shows a simple alert modal.

```tsx
import { BasicModalProps } from "@reactleaf/modal";

interface Props extends BasicModalProps {
  title: string;
  message: string;
}
const Alert = ({ 
  title,
  message,
  visible, // injected by modal
  close, // injected by modal
}: Props) => {
  return (
    <div className={cx("alert", "modal", { visible })}>
      <p className="modal-title">{title}</p>
      <div className="modal-body">
        <p className="message">{message}</p>
      </div>
      <div className="modal-buttons">
        <button onClick={close}>Close</button>
      </div>
    </div>
  );
};
```

--------------------------------

### CSS for Modal Closing Animation (Slideup Example)

Source: https://github.com/reactleaf/modal/blob/main/README.md

Illustrates CSS for a slide-up closing animation. The `.slideup` class defines the transition for the transform property, moving the modal from a translated state to its normal position.

```css
.slideup {
  transition: transform 500ms;
  transform: translateY(100%);
}

.slideup.visible {
  transform: translateY(0);
}
```

--------------------------------

### Custom Modal Styling

Source: https://github.com/reactleaf/modal/blob/main/README.md

Provides examples of how to override the default CSS styles for the ReactLeaf Modal component. This includes styling the overlay, dimming effect, and visibility transitions for custom animations.

```css
.modal-overlay {
  opacity: 0;
  transition: opacity 0.3s;
}
.modal-overlay.dim {
  background-color: rgba(0, 0, 0, 0.5);
}
.modal-overlay.visible {
  opacity: 1;
}
```

--------------------------------

### Overlay Options Configuration

Source: https://github.com/reactleaf/modal/blob/main/README.md

Demonstrates the three levels of applying `OverlayOptions`: per-modal call, per-modal component export, and globally via `ModalProvider`. Options are merged with higher priority given to more specific settings.

```typescript
// register
  ...
  'common/Alert': () => import('./Alert'),

// ./Alert.tsx
export const defaultOverlayOptions: OverlayOptions;

export default function Alert(props) {
  return ...
}
```

```typescript
<ModalProvider register={register} defaultOverlayOptions={HERE}>
  <YourApp />
</ModalProvider>
```

--------------------------------

### Preloading Modals

Source: https://github.com/reactleaf/modal/blob/main/README.md

Shows how to preload modals using `createModalPreloader` to ensure they are available synchronously, which can be useful for animations or modals with large dependencies.

```typescript
// [WARN] preloadModal is not a hook.
import { createModalPreloader } from "@reactleaf/modal";
const preloadModal = createModalPreloader(register);

// when component mounted, load relative modals.
useEffect(() => {
  preloadModal("Alert", "Confirm");
}, []);
```

--------------------------------

### CSS for Modal Opening Animation

Source: https://github.com/reactleaf/modal/blob/main/README.md

Provides CSS classes to implement a fade-in animation for modal overlays. The `.modal-overlay` class sets initial opacity and transition, while `.modal-overlay.visible` applies the visible state.

```css
.modal-overlay {
  opacity: 0;
  transition: opacity 0.3s;
}
.modal-overlay.visible {
  opacity: 1;
}
```

--------------------------------

### Opening Modals via postMessage

Source: https://github.com/reactleaf/modal/blob/main/README.md

Demonstrates how to open modals using `window.postMessage` for scenarios where direct hook usage is not feasible, such as with certain state management libraries. It highlights limitations, including the inability to pass functions as props and the lack of modal closing capabilities via `postMessage`.

```typescript
window.postMessage({
  to: "@reactleaf/modal",
  payload: {
    type: "Example",
    props: { warning: "postMessage only can send SERIALIZABLE values." },
  },
});
```

--------------------------------

### Preloading Modals

Source: https://github.com/reactleaf/modal/blob/main/README-ko.md

Shows how to use `createModalPreloader` to preload modal components. This is useful for scenarios where modals need to be available immediately upon opening, such as with animations, to avoid loading delays.

```typescript
// [주의] preloadModal은 훅이 아닙니다.
import { createModalPreloader } from "@reactleaf/modal";
const preloadModal = createModalPreloader(register);

// 이 컴포넌트가 불러와졌을 때, 컴포넌트에서 사용할 모달을 미리 불러옵니다.
useEffect(() => {
  preloadModal("Alert", "Confirm");
}, []);
```

--------------------------------

### createModalHook Return Values

Source: https://github.com/reactleaf/modal/blob/main/README-ko.md

Illustrates the return values from the `useModal` hook, which include `openModal`, `closeModal`, `closeAll`, and `openedModals` for managing modal states.

```typescript
const useModal = createModalHook<typeof yourModalRegister>();
const { openModal, closeModal, closeAll, openedModals } = useModal();
```

--------------------------------

### Overlay Options Priority

Source: https://github.com/reactleaf/modal/blob/main/README-ko.md

Explains the hierarchy of `OverlayOptions` settings: directly in `openModal`, within the modal component's declaration, and globally via `ModalProvider`. Settings are merged using `Object.assign()`.

```typescript
// register
  ...
  'common/Alert': () => import('./Alert'),

// ./Alert.tsx
export const defaultOverlayOptions: OverlayOptions;

// <ModalProvider />
<ModalProvider register={register} defaultOverlayOptions={여기}>
  <YourApp />
</ModalProvider>
```

--------------------------------

### ModalProvider Props

Source: https://github.com/reactleaf/modal/blob/main/README-ko.md

Details the props for the `ModalProvider` component, specifically `register` for providing the modal definitions and `defaultOverlayOptions` for setting default overlay configurations.

```tsx
type defaultOverlayOptions = Partial<OverlayOptions>;

// 별 설정이 필요 없다면, 기본 값을 사용합니다. 기본값은 아래, openModal과 함께 설명됩니다.
return (
  <ModalProvider register={register}>
    <App />
  </ModalProvider>
);
// 모든 모달에 적용할 옵션이 필요하다면 이렇게 작성할 수 있습니다.
return (
  <ModalProvider
    register={register}
    defaultOverlayOptions={{ closeDelay: 300 }}
  >
    <App />
  </ModalProvider>
);
```

--------------------------------

### ModalProvider Props

Source: https://github.com/reactleaf/modal/blob/main/README.md

Details the props available for the ModalProvider component, including `register` for modal definitions and `defaultOverlayOptions` for setting default overlay configurations.

```typescript
type defaultOverlayOptions = Partial<OverlayOptions>;

// just use as default. default values are decribed on openModal()'s description.
return (
  <ModalProvider register={register}>
    <App />
  </ModalProvider>
);
// if you need some settings that applied to every modal, use 'default'
return (
  <ModalProvider
    register={register}
    defaultOverlayOptions={{ closeDelay: 300 }}
  >
    <App />
  </ModalProvider>
);
```

--------------------------------

### createModalHook Return Values

Source: https://github.com/reactleaf/modal/blob/main/README.md

Lists the functions and properties returned by the custom `useModal` hook created with `createModalHook`, including `openModal`, `closeModal`, `closeAll`, and `openedModals`.

```typescript
const useModal = createModalHook<typeof yourModalRegister>();
const { openModal, closeModal, closeAll, openedModals } = useModal();
```

--------------------------------

### Using openModal with Type Checking

Source: https://github.com/reactleaf/modal/blob/main/README-ko.md

Demonstrates how to use the `openModal` function obtained from the `useModal` hook. It highlights the type safety features, ensuring correct modal types and props are passed.

```typescript
import { useModal } from './modals/useModal'

const { openModal } = useModal()
function openAlert() {
  openModal({ type: 'Confrim', props: { title: 'Hello', message: 'Wow' } })
              ^^^^       ^^
              type 'Confrim' is not assignable to type 'Alert' | 'Confirm'
}

import { useModal } from './modals/useModal'

const { openModal } = useModal()
function openAlert() {
  openModal({ type: 'Alert', props: { title: 'Hello' } })
                             ^^^^^
                             property 'message' is missing
}
```

--------------------------------

### Using `postMessage` to Open Modals

Source: https://github.com/reactleaf/modal/blob/main/README-ko.md

Demonstrates how to open modals from outside React components using `window.postMessage`. This method has limitations, such as the inability to pass functions or perform type checking on props.

```typescript
window.postMessage({
  to: "@reactleaf/modal",
  payload: {
    type: "Example",
    props: {
      warning: "postMessage는 Serializable 한 값만 전달할 수 있습니다.",
    },
  },
});
```

--------------------------------

### Overlay Options Interface

Source: https://github.com/reactleaf/modal/blob/main/README.md

Defines the configuration options for modal overlays, allowing customization of class names, close delays, click behavior, dimming, and scroll prevention.

```typescript
export interface OverlayOptions {
  className?: string; // to distinguish each overlay element: make different animation per modal.
  closeDelay?: number; // default: 0, as ms. this will make modal close(unmount) delayed. Useful if you want to add closing animation.
  closeOnOverlayClick?: boolean; // default: true
  dim?: boolean; // default: true
  preventScroll?: boolean; // default: true, when modal is opened, body scroll is blocked.
}
```

--------------------------------

### ModalProvider Usage

Source: https://github.com/reactleaf/modal/blob/main/README-ko.md

Integrates the ModalProvider into the React application to provide modal context and a container for rendering modals. It requires the modal register object.

```tsx
import { ModalProvider } from "@reactleaf/modal";
import register from "./modals/register";

function App() {
  ... 
  return <ModalProvider register={register}>{...}</ModalProvider>
}
```

--------------------------------

### Import Default Modal Styles

Source: https://github.com/reactleaf/modal/blob/main/README-ko.md

Import the default CSS file for the ReactLeaf Modal component. This is the simplest way to apply basic styling if custom styling is not required.

```javascript
import "@reactleaf/modal/style.css";
```

--------------------------------

### Importing Default Modal Styles

Source: https://github.com/reactleaf/modal/blob/main/README.md

Shows how to import the default CSS styles for the ReactLeaf Modal component. This allows for immediate use of the component with its default appearance.

```javascript
import "@reactleaf/modal/style.css";
```

--------------------------------

### Overlay Options for Modals

Source: https://github.com/reactleaf/modal/blob/main/README-ko.md

Details the `OverlayOptions` interface, which allows customization of modal overlays, including class names for styling, close delays, click-to-close behavior, dimming effects, and scroll prevention.

```typescript
export interface OverlayOptions {
  className?: string; // 만약 서로 다른 모달을 구분하고 싶다면: 대개 모달마다 다른 애니메이션을 주고 싶다면, className을 통해 구분할 수 있습니다.
  closeDelay?: number; // 기본값은 0 입니다. ms 단위를 사용합니다. 이 옵션을 설정할 경우, close()가 불린 뒤 모달이 실제로 unmount 되기까지 지연이 생깁니다. 모달을 닫는 애니메이션 같은 걸 구현할 때 굉장히 유용합니다.
  closeOnOverlayClick?: boolean; // 기본값은 true 입니다. 모달 바깥, dim 영역을 클릭할 때 모달을 닫습니다.
  dim?: boolean; // 기본값은 true 입니다. 오버레이 요소에 .dim 클래스를 포함합니다. 기본으로 제공되는 css 스타일을 사용한다면, 모달이 열렸을 때 모달 바깥이 어둡게 가려집니다.
  preventScroll?: boolean; // 기본값은 true 입니다. 모달이 열렸을 때, body 의 스크롤을 막습니다.
}
```

--------------------------------

### Modal Opening and Payload Interface

Source: https://github.com/reactleaf/modal/blob/main/README.md

Defines the interface for the payload used to open a modal, including its type, properties, overlay options, and events. This is the primary function for displaying modals.

```typescript
interface OpenModalPayload {
  type: keyof Register;
  props?: Props;
  overlayOptions?: OverlayOptions;
  events?: ModalEvents;
}

function openModal(payload: OpenModalPayload);
```

--------------------------------

### Type-Safe Modal Opening (Props Check)

Source: https://github.com/reactleaf/modal/blob/main/README.md

Demonstrates how `openModal` enforces type safety for modal props, ensuring that the correct properties are passed for the specified modal type.

```typescript
import { useModal } from './modals/useModal'

const { openModal } = useModal()
function openAlert() {
  openModal({ type: 'Alert', props: { title: 'Hello' } })
                             ^^^^^
                             property 'message' is missing
}
```

--------------------------------

### BasicModalProps for Custom Modals

Source: https://github.com/reactleaf/modal/blob/main/README-ko.md

Explains the `BasicModalProps` interface, which includes `close()` and `visible` props automatically injected into custom modals opened via `openModal`.

```tsx
import { BasicModalProps } from "@reactleaf/modal";

interface Props extends BasicModalProps {
  title: string;
  message: string;
}
const Alert = ({
  title,
  message,
  visible, // injected by modal
  close, // injected by modal
}: Props) => {
  return (
    <div className={cx("alert", "modal", { visible }) }>
      <p className="modal-title">{title}</p>
      <div className="modal-body">
        <p className="message">{message}</p>
      </div>
      <div className="modal-buttons">
        <button onClick={close}>Close</button>
      </div>
    </div>
  );
};
```

--------------------------------

### Modal Event Handlers

Source: https://github.com/reactleaf/modal/blob/main/README-ko.md

Defines the `ModalEvents` interface for handling modal lifecycle events, including `onOpen`, `beforeClose` (which can prevent closing), and `onClose` callbacks.

```typescript
export interface ModalEvents {
  onOpen?(payload: { type; props; id }): void; // 모달이 async하게 불러와 진 다음 열리기 때문에, openModal() 이후 실제로 모달이 마운트 된 순간을 알기 위해 사용합니다.
  beforeClose?(): PromiseOr<void>; // 모달이 닫히기 전에 불립니다. 모달을 닫지 않으려면, throw Error 를 통해 모달이 닫히지 않도록 막을 수 있습니다. Promise를 반환해 모달이 닫히는 것을 지연시킬 수도 있습니다.
  onClose?(): void; // 모달이 닫힐 때 불리는 콜백 함수입니다.
}
```

--------------------------------

### Creating a Custom useModal Hook

Source: https://github.com/reactleaf/modal/blob/main/README.md

Explains how to create a type-safe useModal hook by using `createModalHook` and passing the modal register type. This ensures type checking for modal types and props.

```typescript
// useModal.ts
import { createModalHook } from "@reactleaf/modal";
import register from "./register";

export const useModal = createModalHook<typeof register>();
```

--------------------------------

### Creating a useModal Hook

Source: https://github.com/reactleaf/modal/blob/main/README-ko.md

Creates a custom `useModal` hook using `createModalHook` from the library. This hook is typed with the modal register to ensure type safety for modal operations.

```typescript
// useModal.ts
import { createModalHook } from "@reactleaf/modal";
import register from "./register";

export const useModal = createModalHook<typeof register>();
```

--------------------------------

### Modal Opening and Payload Structure

Source: https://github.com/reactleaf/modal/blob/main/README-ko.md

Defines the structure for opening a modal with specific types, props, overlay options, and events. The `openModal` function returns a unique ID for the opened modal.

```typescript
interface OpenModalPayload {
  type: keyof Register;
  props?: Props;
  overlayOptions?: OverlayOptions;
  events?: ModalEvents;
}

function openModal(payload: OpenModalPayload);
```

--------------------------------

### Modal Events Interface

Source: https://github.com/reactleaf/modal/blob/main/README.md

Defines the interface for modal events, including callbacks for when a modal opens (`onOpen`), before it closes (`beforeClose`), and after it closes (`onClose`). `beforeClose` can prevent closing by throwing an error or returning a Promise.

```typescript
export interface ModalEvents {
  onOpen?(payload: { type; props; id }): void; // modal will be loaded asynchrounously. onOpen() is called when modal component is actually mounted.
  beforeClose?(): PromiseOr<void>; // It called right before modal close. to prevent close modal, throw Error in beforeClose(). If Promise is returned, modal will be opened until Promise is resolved.
  onClose?(): void; // a callback that is called right after modal is closed.
}
```

--------------------------------

### Modal Closing Methods

Source: https://github.com/reactleaf/modal/blob/main/README.md

Outlines various methods for closing modals: using the modal's own close mechanism, programmatically via `closeModal` with an ID, `closeAll`, or by clicking the overlay if `closeOnOverlayClick` is enabled.

```typescript
// const id = openModal(); closeModal({ id });
// closeAll()
// closeOnOverlayClick: true
```

--------------------------------

### Custom Modal Styling with CSS

Source: https://github.com/reactleaf/modal/blob/main/README-ko.md

Defines custom CSS styles for the ReactLeaf Modal component. This allows for unique visual appearances and animations. It targets specific classes like `.modal-overlay`, `.modal-overlay.dim`, and `.modal-overlay.visible` to control overlay appearance, dimming effects, and visibility transitions.

```css
.modal-overlay {
  opacity: 0;
  transition: opacity 0.3s;
}
.modal-overlay.dim {
  background-color: rgba(0, 0, 0, 0.5);
}
.modal-overlay.visible {
  opacity: 1;
}
```

--------------------------------

### Opened Modals Access

Source: https://github.com/reactleaf/modal/blob/main/README.md

Provides access to an array of currently opened modals, each represented by its `OpenModalPayload`. This allows checking the state of open modals.

```typescript
openedModals: OpenModalPayload[];
```

--------------------------------

### Type-Safe Modal Opening (Type Check)

Source: https://github.com/reactleaf/modal/blob/main/README.md

Illustrates how the `openModal` function, when used with a type-safe hook, prevents incorrect modal types from being opened, providing compile-time errors.

```typescript
import { useModal } from './modals/useModal'

const { openModal } = useModal()
function openAlert() {
  openModal({ type: 'Confrim', props: { title: 'Hello', message: 'Wow' } })
              ^^^^       ^^
              type 'Confrim' is not assignable to type 'Alert' | 'Confirm'
}
```

--------------------------------

### Accessing Open Modals

Source: https://github.com/reactleaf/modal/blob/main/README-ko.md

The `openedModals` property returns an array of currently open modal payloads, allowing checks for the presence or type of open modals.

```typescript
openedModals: OpenModalPayload[];
```

--------------------------------

### Closing Specific and All Modals

Source: https://github.com/reactleaf/modal/blob/main/README-ko.md

Provides functions to close a specific modal using its ID (`closeModal`) or to close all currently open modals (`closeAll`).

```typescript
closeModal({ id: string });
closeAll();
```

--------------------------------

### Modal Closing Functions

Source: https://github.com/reactleaf/modal/blob/main/README.md

Provides functions to close modals. `closeModal` closes a specific modal using its ID, while `closeAll` closes all currently open modals.

```typescript
closeModal({ id: string });
closeAll();
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.