# React PDF Flipbook Viewer

This project is a React-based PDF flipbook viewer that allows users to view PDF documents in a flipbook format. It is built using Next.js and various other libraries to provide a seamless and interactive experience.
Here is the codesandbox Link-

https://codesandbox.io/p/github/mohitkumawat310/react-pdf-flipbook-viewer/master?import=true

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Features

• Flipbook Navigation: Navigate through the PDF pages using flipbook-style animations.
• Zoom and Pan: Zoom in and out of the pages and pan around for better viewing.
• Fullscreen Mode: Toggle fullscreen mode for an immersive reading experience.
• Keyboard Shortcuts: Use keyboard arrows to navigate through the pages.
• Responsive Design: Optimized for various screen sizes.

Components

FlipbookViewer

Prop	Type	Description
pdfUrl	string	URL of the PDF document to be displayed.
shareUrl	string	URL to be used for sharing the document.
className	string	Additional CSS classes for styling.
disableShare	boolean	Flag to disable the share button.

Toolbar

Prop	Type	Description
flipbookRef	object	Reference to the flipbook component.
containerRef	object	Reference to the container element.
screenfull	object	Screenfull instance for fullscreen functionality.
pdfDetails	object	Details of the PDF document (total pages, etc.).
viewerStates	object	State of the viewer (current page, zoom scale).
shareUrl	string	URL to be used for sharing the document.
disableShare	boolean	Flag to disable the share button.

Flipbook

Prop	Type	Description
viewerStates	object	State of the viewer (current page, zoom scale).
setViewerStates	function	Function to update the viewer state.
flipbookRef	object	Reference to the flipbook component.
pdfDetails	object	Details of the PDF document (total pages, etc.).

SliderNav

Prop	Type	Description
flipbookRef	object	Reference to the flipbook component.
pdfDetails	object	Details of the PDF document (total pages, etc.).
viewerStates	object	State of the viewer (current page, zoom scale).

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Special Thanks

Special thanks to the following libraries that made this project possible:

• Next.js
• React
• react-pdf
• react-pageflip
• react-zoom-pan-pinch
• screenfull
• radix-ui
• tailwindcss
• class-variance-authority
• clsx
• lucide-react
• keyboardjs
• react-share
• sonner