React Layered Dialog

React 18 useSyncExternalStore 기반 경량 다이얼로그 매니저

Live Demo & Docs

더 자세한 설명과 다양한 사용 예제는 아래 공식 문서 페이지에서 확인하실 수 있습니다.

Live Demo 바로가기

Quick Start

설치

pnpm add react-layered-dialog

기본 사용법

react-layered-dialog는 전역 DialogStore와 createDialogApi로 구성한 dialog 헬퍼를 통해 다이얼로그를 제어합니다.

import { dialog, dialogStore } from '@/lib/dialogs';
import { DialogsRenderer } from 'react-layered-dialog';

function App() {
  const showConfirm = () => {
    // 1. 레지스트리에 등록된 다이얼로그 메서드를 호출
    dialog.confirm({
      title: '알림',
      message: '안녕하세요! React Layered Dialog 입니다.',
    });
  };

  return (
    <>
      <button onClick={showConfirm}>알림 열기</button>

      {/* 2. 앱 최상단에 렌더러 추가 */}
      <DialogsRenderer store={dialogStore} />
    </>
  );
}

전체 설정 과정( DialogStore, createDialogApi 등)에 대한 자세한 내용은 공식 문서를 참고해 주세요.

Why React Layered Dialog?

| Feature | React Layered Dialog | 일반 Modal 라이브러리 | | :--- | :--- | :--- | | 선언적 API | ✅ openDialog('type', props) | ❌ 상태 끌어올리기 또는 복잡한 상태관리 | | 타입 안전성 | ✅ 완전한 TypeScript 지원 | ❌ 제한적 또는 없음 | | 자동 z-index 관리 | ✅ 다중 중첩 시 자동 처리 | ❌ 직접 관리 필요 | | 경량, 의존성 없음 | ✅ 1KB 미만 | ❌ 무거운 의존성 포함 | | 확장성 | ✅ 모든 React 컴포넌트 지원 | ❌ 제한된 템플릿 |

기여하기

이 프로젝트는 Conventional Commits 명세를 따릅니다. 버전 관리 및 배포는 Changesets를 사용합니다. 자세한 내용은 배포 가이드를 참고하세요.