react-comic-viewer

A comic/manga viewer component for React.

Demo

https://react-comic-viewer.kkweb.io

Features

• RTL (right-to-left) and LTR support for manga/comic reading
• Responsive single/double page view
• Fullscreen mode
• Swipe navigation on touch devices
• Keyboard navigation (Arrow keys, Escape)
• Double-tap to zoom
• Tap to show/hide UI
• Thumbnail navigation
• Loading indicator
• Page preloading
• TypeScript support

Requirements

• React 18 or later

Installation

npm install react-comic-viewer

Usage

import { ComicViewer } from "react-comic-viewer";
import "react-comic-viewer/styles.css";

function App() {
  return (
    <ComicViewer pages={["page1.jpg", "page2.jpg", "page3.jpg", "page4.jpg"]} />
  );
}

export default App;

Props

Prop	Type	Default	Description
pages	Array<string | ReactNode>	-	Required. Array of image URLs or React nodes
direction	"rtl" | "ltr"	"rtl"	Reading direction
initialCurrentPage	number	0	Initial page index
initialIsExpansion	boolean	false	Initial expansion state
showPageIndicator	boolean	false	Show current page indicator
switchingRatio	number	1	Aspect ratio threshold for single/double page switch
onChangeCurrentPage	(currentPage: number) => void	-	Callback when page changes
onChangeExpansion	(isExpansion: boolean) => void	-	Callback when expansion state changes
onClickCenter	MouseEventHandler<HTMLButtonElement>	-	Callback when center area is clicked
className	Partial<Record<string, string>>	-	Custom class names for styling
text	{ expansion?, fullScreen?, move?, normal?, thumbnails? }	-	Custom text for UI buttons

Keyboard Shortcuts

Key	Action
Arrow Left	Next page (RTL) / Previous page (LTR)
Arrow Right	Previous page (RTL) / Next page (LTR)
Escape	Exit fullscreen

Touch Gestures

Gesture	Action
Swipe left	Navigate pages
Swipe right	Navigate pages
Single tap	Toggle UI visibility
Double tap	Toggle zoom (2x)

Browser Support

Full Screen API is not supported on iOS. The fullscreen button will not be displayed on unsupported browsers.

License

MIT