A modern, feature-rich PDF viewer component built with React, TypeScript, and Vite. This library provides a responsive PDF viewing experience with extensive customization options.
npm install @abduljebar/pdf-readerA modern, feature-rich PDF viewer component built with React, TypeScript, and Vite. This library provides a responsive PDF viewing experience with extensive customization options.
``bash`
npm install @your-library/pdf-vieweror
yarn add @your-library/pdf-viewer
`tsx
import { PDFViewer } from '@your-library/pdf-viewer';
import '@your-library/pdf-viewer/dist/style.css';
function App() {
return (
📖 Documentation
$3
tsx
import { PDFViewer } from '@your-library/pdf-viewer';function MyPDFViewer() {
return (
config={{
enableDarkMode: true,
enableZoom: true,
enablePageNavigation: true,
}}
/>
);
}
`$3
tsx
function PDFUploadViewer() {
const [file, setFile] = useState(null); return (
config={{
enableFileUpload: true,
}}
onFileSelect={(selectedFile) => {
setFile(selectedFile);
console.log('File selected:', selectedFile.name);
}}
/>
);
}
`$3
tsx
config={{
// Feature toggles
enableDarkMode: true,
enableZoom: true,
enablePageNavigation: true,
enableViewModeToggle: true,
enableFileUpload: true,
enableSearch: true,
enablePrint: true,
enableDownload: true,
// Display options
defaultZoom: 1,
minZoom: 0.25,
maxZoom: 3,
defaultScrollMode: 'vertical',
showThumbnails: true,
showOutline: true,
showAnnotations: false,
pageGap: 40,
// UI/UX options
enableKeyboardNavigation: true,
enableSmoothScrolling: true,
showPageNumbers: true,
showDocumentTitle: true,
}}
// Layout
showSidebar={true}
sidebarWidth={280}
sidebarPosition="left"
// Theme
theme="system"
// Callbacks
onLoad={(pdfDoc) => console.log('PDF loaded:', pdfDoc)}
onError={(error) => console.error('Error:', error)}
onPageChange={(page) => console.log('Page changed:', page)}
onZoomChange={(zoom) => console.log('Zoom changed:', zoom)}
// Custom components
customToolbar={
customSidebar={
customLoadingComponent={
/>
`🏗️ Component Architecture
src/
├── components/
│ ├── PDFViewer/
│ │ ├── PDFViewer.tsx # Main component
│ │ ├── Sidebar.tsx # Responsive sidebar
│ │ ├── PDFDocument.tsx # PDF rendering
│ │ ├── ThumbnailsPanel.tsx # Page thumbnails
│ │ ├── OutlinePanel.tsx # Document outline
│ │ └── AnnotationsPanel.tsx # Comments & highlights
│ │
│ └── Toolbar/
│ ├── Toolbar.tsx # Main toolbar
│ ├── ZoomControls.tsx # Zoom functionality
│ ├── PageControls.tsx # Page navigation
│ ├── ViewModeToggle.tsx # View mode switcher
│ ├── DarkModeToggle.tsx # Theme toggle
│ ├── FileUpload.tsx # File upload
│ └── ResponsiveDropdown.tsx # Mobile dropdown
│
├── hooks/
│ └── useMediaQuery.ts # Responsive hooks
│
├── types/
│ └── index.ts # TypeScript definitions
│
└── utils/
└── pdfWorker.ts # PDF.js setup
🎨 Styling
The library uses Tailwind CSS for styling. You can customize the appearance by:
1. Overriding CSS variables:
css
:root {
--pdf-primary: #2563eb;
--pdf-secondary: #64748b;
--pdf-background: #ffffff;
--pdf-foreground: #1f2937;
}
`2. Using custom classes:
tsx
toolbarClassName="my-toolbar-class"
sidebarClassName="my-sidebar-class"
documentClassName="my-document-class"
/>
`3. Extending Tailwind config:
javascript
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'pdf-primary': '#2563eb',
'pdf-secondary': '#64748b',
},
},
},
}
`📱 Responsive Breakpoints
| Device | Breakpoint | Features |
|--------|------------|----------|
| Mobile | < 768px | Bottom navigation, simplified controls, touch gestures |
| Tablet | 768px - 1024px | Condensed toolbar, medium sidebar |
| Desktop | > 1024px | Full toolbar, full sidebar, all features |
🎯 Performance
- Lazy loading: Components load on demand
- Virtual scrolling: Only visible pages are rendered
- Image optimization: Thumbnails use appropriate resolutions
- Memory management: Proper cleanup of resources
- Bundle optimization: Code splitting for faster loads
🔧 Development
$3
- Node.js 18+
- npm, yarn, or pnpm$3
bash
Clone the repository
git clone
cd pdf-viewer-libraryInstall dependencies
npm installStart development server
npm run devBuild for production
npm run buildRun tests
npm testLint code
npm run lintType checking
npm run type-check
`$3
.
├── src/ # Source code
├── dist/ # Built files
├── examples/ # Usage examples
├── tests/ # Test files
├── docs/ # Documentation
└── package.json
$3
bash
Build library
npm run build:libBuild documentation
npm run build:docsPublish to npm
npm publish
`🧪 Testing
bash
Run all tests
npm testRun tests in watch mode
npm run test:watchRun tests with coverage
npm run test:coverageRun E2E tests
npm run test:e2e
`📄 API Reference
$3
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
| string | - | URL of the PDF to load |
| file | File | - | PDF file object |
| config | PDFViewerConfig | {} | Configuration object |
| theme | 'light' | 'dark' | 'system' | 'system' | Theme mode |
| showSidebar | boolean | true | Show/hide sidebar |
| sidebarWidth | number | 240 | Sidebar width in pixels |
| sidebarPosition | 'left' | 'right' | 'left' | Sidebar position |
| onLoad | function | - | Called when PDF loads |
| onError | function | - | Called on error |
| onPageChange | function | - | Called when page changes |
| onZoomChange | function | - | Called when zoom changes |$3
`typescript
interface PDFViewerConfig {
// Feature toggles
enableDarkMode?: boolean;
enableZoom?: boolean;
enablePageNavigation?: boolean;
enableViewModeToggle?: boolean;
enableFileUpload?: boolean;
enableSearch?: boolean;
enablePrint?: boolean;
enableDownload?: boolean;
// Display options
defaultZoom?: number;
minZoom?: number;
maxZoom?: number;
defaultScrollMode?: ScrollMode;
showThumbnails?: boolean;
showOutline?: boolean;
showAnnotations?: boolean;
pageGap?: number;
// UI/UX options
enableKeyboardNavigation?: boolean;
enableSmoothScrolling?: boolean;
showPageNumbers?: boolean;
showDocumentTitle?: boolean;
// Customization
className?: string;
toolbarClassName?: string;
sidebarClassName?: string;
documentClassName?: string;
}
`🤝 Contributing
1. Fork the repository
2. Create a feature branch (
)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)This project is licensed under the MIT License - see the LICENSE file for details.
- PDF.js - PDF rendering engine
- Lucide React - Beautiful icons
- Tailwind CSS - Utility-first CSS framework
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Email: abduljebar49@gmail.com
- [ ] Text selection and copying
- [ ] Annotation creation and editing
- [ ] Form filling support
- [ ] PDF/A compliance
- [ ] Multi-language support
- [ ] Plugin system
- [ ] Offline support
- [ ] Cloud storage integration
---
Made with ❤️ by Abduljebar Sani