https://github.com/onedoclabs/pdfreader

Easy Radix-Style PDF Viewer for React.
https://github.com/onedoclabs/pdfreader

free pdf pdf-viewer pdf-viewer-component radix-ui react tailwindcss ui-components unstyled

Last synced: 9 months ago
JSON representation

Easy Radix-Style PDF Viewer for React.

• Host: GitHub
• URL: https://github.com/onedoclabs/pdfreader
• Owner: OnedocLabs
• License: mit
• Created: 2024-07-22T10:07:04.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-11-20T13:22:57.000Z (over 1 year ago)
• Last Synced: 2025-05-19T23:06:19.531Z (about 1 year ago)
• Topics: free, pdf, pdf-viewer, pdf-viewer-component, radix-ui, react, tailwindcss, ui-components, unstyled
• Language: TypeScript
• Homepage: https://pdfreader.fileforge.com/
• Size: 3.52 MB
• Stars: 72
• Watchers: 1
• Forks: 16
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
[![Banner](https://raw.githubusercontent.com/OnedocLabs/pdfreader/main/banner.png)](https://www.fileforge.com?utm_source=github&utm_medium=referral&utm_campaign=pdfreader-readme)

# PDFReader

A dead simple, stylable, React PDF reader component.

[Docs: https://pdfreader.fileforge.com](https://pdfreader.fileforge.com/?path=/docs/viewer--docs)

> Important: This component is still in development and not ready for production use.

## Features

- [x] Zoom in and out

- [x] Text layer

- [x] Annotation layer

- [x] Canvas layer

- [x] Page navigation

- [x] Outline view

- [x] Thumbnail view

- [ ] Two-sided view

- [ ] Search and highlight

- [ ] Annotation placement

## Installation

```bash

npm i @fileforge/pdfreader

```

## Usage

You can add and remove parts of the reader by adding or removing the related components. NB: the `Viewport` component always needs to have `Pages` and `Page` as direct children.

![Sample Reader with Tailwind Styling](https://raw.githubusercontent.com/OnedocLabs/pdfreader/main/capture.png)

```jsx

import React from 'react';

import { Root, CurrentPage, ZoomOut, Zoom, ZoomIn, Outline, OutlineItem, OutlineChildItems, Viewport, Pages, Page, CanvasLayer, TextLayer, AnnotationLayer } from '@fileforge/pdfreader';

export const Reader = ({ fileURL }: { fileURL: string }) => {

  return (

    

      


        

        


          -

          

          +

        

      

      


        

          

            

          

        

        

          

            

              

              

              

            

          

        

      

    

  );

};

```


## Sponsors

This project is sponsored by [Fileforge](https://fileforge.com).