React PDF Flipbook Viewer

A customizable React component to render PDF documents in a flipbook-style viewer — perfect for brochures, magazines, and interactive documents.

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.

Installation

Install using npm

npm install react-pdf-flipbook-viewer

or with yarn

yarn add react-pdf-flipbook-viewer

Tailwind Setup

This Library requires Tailwindcss. Add the following line to your tailwind.config.js :

module.exports = {
  content: [
    './node_modules/react-pdf-flipbook-viewer/**/*.{js,ts,jsx,tsx}',
  ],
}

Usage

This is a basic Example using nextjs:

'use client';
import {FlipbookViewer} from 'react-pdf-flipbook-viewer'
import React from 'react'

const Page = () => {
  return (
    <div className="block">
      <FlipbookViewer pdfUrl='/demo.pdf' />
    </div>
  )
}

export default Page

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. |

Local Development

You can run the following to setup a development environment:

git clone https://github.com/Timeler1/react-pdf-flipbook-viewer
cd react-pdf-flipbook-viewer
npm install
npm run build

You can use yalc to test changes locally in another project.

Thanks

Special thanks to the creator of the original project, mohitkumawat310.

Thanks also to the libraries used in this Project:

• React
• react-pdf
• react-pageflip
• react-zoom-pan-pinch
• screenfull
• tailwindcss
• class-variance-authority
• clsx
• lucide-react
• react-share