🪟

@lani.ground/react-modal

React Component Library

NPM Version
Production Ready
TypeScript
🎯

Preview

Usage

1import { useModal } from '@lani.ground/react-modal';
2import '@lani.ground/react-modal/css';
3
4const { open, close, isOpen } = useModal();
5
6const openMyModal = () => {
7  open({
8    name: 'my-modal',
9    component: (closeModal) => (
10      <div className="bg-white p-6 rounded-lg">
11        <h2>Hello Modal!</h2>
12        <button onClick={closeModal}>닫기</button>
13      </div>
14    ),
15    centerMode: true,
16    dim: 'rgba(0, 0, 0, 0.8)',
17    animation: { duration: 300 }
18  });
19};
20
21<button onClick={openMyModal}>모달 열기</button>
🎯

Modal Examples

📱

Basic Modal

기본적인 모달 컴포넌트입니다. 버튼을 클릭해서 열고 닫을 수 있습니다.

상태: 닫힘

주요 기능

  • 버튼으로 열기/닫기
  • 중앙 정렬
  • 딤 배경
  • 애니메이션
🎲

Conditional Modal

조건부 렌더링이 가능한 모달입니다. 랜덤하게 1번/2번 팝업을 보여줍니다.

상태: 닫힘

주요 기능

  • 조건부 렌더링
  • 랜덤 상태
  • 자동 닫기
  • 상태 표시
⚙️

Advanced Modal

고급 기능이 포함된 모달입니다. 외부 클릭 비활성화, 컨테이너 패딩, 복잡한 컴포넌트를 포함합니다.

상태: 닫힘

주요 기능

  • 외부 클릭 비활성화
  • 컨테이너 패딩
  • 복잡한 UI
  • 중앙 정렬
  • 2중 모달 예제
🎯

useModal Hook API

🎣

useModal 반환값

MethodTypeDescription
open(modal: ModalConfig) => string모달을 열고 모달 이름을 반환
close(name: string) => Promise<void>특정 이름의 모달을 닫음
closeAll() => Promise<void>모든 모달을 닫음
isOpen(name: string) => boolean특정 모달의 열림 상태를 확인
⚙️

ModalConfig

PropertyTypeRequiredDescription
component(closeModal: () => Promise<void>) => JSX.ElementRequired모달 안에 렌더링될 컴포넌트
namestringOptional모달 식별자 (자동 생성됨)
dimstringOptional배경 딤 색상 (예: 'rgba(0, 0, 0, 0.8)')
centerModebooleanOptional모달을 화면 중앙에 배치할지 여부 (기본값: false)
animation{ className?: string; duration: number }Optional애니메이션 설정
containerPaddingstringOptional모달 컨테이너 패딩
disabledScrollLockbooleanOptional스크롤 잠금 비활성화 여부 (기본값: false)
disabledOutsideClosebooleanOptional외부 클릭으로 닫기 비활성화 여부 (기본값: false)
onClose() => voidOptional모달 닫힐 때 호출되는 콜백
🎯

사용 예제

📝 Usage

1import { useModal } from '@lani.ground/react-modal';
2
3function MyComponent() {
4  const { open, close, isOpen } = useModal();
5
6  const openMyModal = () => {
7    open({
8      name: 'my-modal',
9      component: (closeModal) => (
10        <div className="bg-white p-6 rounded-lg">
11          <h2>Hello Modal!</h2>
12          <button onClick={closeModal}>
13            닫기
14          </button>
15        </div>
16      ),
17      centerMode: true,
18      dim: 'rgba(0, 0, 0, 0.8)',
19      animation: { duration: 300 }
20    });
21  };
22
23  return (
24    <div>
25      <button onClick={openMyModal}>
26        모달 열기
27      </button>
28      <p>모달 상태: {isOpen('my-modal') ? '열림' : '닫힘'}</p>
29    </div>
30  );
31}

🔥 주요 특징:

  • • ModalProvider로 앱을 감싸면 어디서든 useModal 사용 가능
  • • 개별 상태 관리가 필요 없음 (내부적으로 관리됨)
  • • 여러 모달을 동시에 열고 관리할 수 있음
  • • 라우팅 변경 시 모든 모달이 자동으로 닫힘