🖼️

@lani.ground/react-image-viewer

React Component Library

NPM Version

Production Ready

TypeScript

🎯

Preview

Props 정의

Name	Type	Required	Description
children	JSX.Element	Required	이미지가 포함된 자식 컴포넌트
disableGallery	boolean	Optional	갤러리 모드 비활성화 여부 (기본값: false)
controller	{ next: JSX.Element; prev: JSX.Element }	Optional	커스텀 이전/다음 버튼 컴포넌트

Usage

1import { ImageViewerProvider } from '@lani.ground/react-image-viewer';
2import '@lani.ground/react-image-viewer/css';
3
4<ImageViewerProvider disableGallery>
5  Something Markup...
6</ImageViewerProvider>

🎯

ImageViewer Examples

🖼️

Single Image Viewer

개별 이미지 뷰어 모드입니다. 각 이미지를 독립적으로 확대/축소하여 볼 수 있습니다.

Example 1

Example 2

Example 3

주요 기능

개별 이미지 뷰
확대/축소
드래그 이동

🎨

Gallery Viewer

갤러리 모드 이미지 뷰어입니다. 이미지들을 연속적으로 탐색할 수 있으며, 썸네일 네비게이션을 제공합니다.

Example 1

Example 2

Example 3

Example 4

Example 5

주요 기능

갤러리 네비게이션
슬라이드쇼

🎯

사용법 안내

💡

Image Viewer 사용 팁

• 확대/축소: 마우스 휠 또는 핀치 제스처를 사용하세요

• 이동: 이미지를 드래그하여 원하는 부분을 볼 수 있습니다

• 갤러리 모드: 같은 ImageViewerProvider 안의 모든 이미지가 연결됩니다