https://github.com/omimouni/use-pdf-renderer

A React hook for rendering PDF files as images
https://github.com/omimouni/use-pdf-renderer

converter hook images parser pdf pdf-renderer react renderer

Last synced: about 1 year ago
JSON representation

A React hook for rendering PDF files as images

• Host: GitHub
• URL: https://github.com/omimouni/use-pdf-renderer
• Owner: omimouni
• Created: 2025-02-22T18:36:16.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-02-22T19:15:41.000Z (over 1 year ago)
• Last Synced: 2025-02-22T20:22:47.444Z (over 1 year ago)
• Topics: converter, hook, images, parser, pdf, pdf-renderer, react, renderer
• Language: TypeScript
• Homepage:
• Size: 54.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# use-pdf-renderer

A React hook for rendering PDF files as images

[![npm version](https://img.shields.io/npm/v/use-pdf-renderer.svg)](https://www.npmjs.com/package/use-pdf-renderer)

[![npm downloads](https://img.shields.io/npm/dm/use-pdf-renderer.svg)](https://www.npmjs.com/package/use-pdf-renderer)

[![license](https://img.shields.io/npm/l/use-pdf-renderer.svg)](https://github.com/omimouni/use-pdf-renderer/blob/main/LICENSE)

## Installation

```

npm install use-pdf-renderer pdfjs-dist

```

## Usage

```jsx

import { usePdfRenderer } from 'use-pdf-renderer';

import 'pdfjs-dist/build/pdf.worker.min';

function PdfViewer() {

  const { images, loading, progress, error, renderPdf } = usePdfRenderer();

  const handleFileChange = (event) => {

    const file = event.target.files?.[0];

    if (file) {

      const url = URL.createObjectURL(file);

      renderPdf(url)

        .catch(console.error)

        .finally(() => URL.revokeObjectURL(url));

    }

  };

  return (

    


      

      

      {loading && 
Loading... {(progress * 100).toFixed(0)}%
}

      {error && 
Error: {error.message}
}

      

      {images.map((image, index) => (

        

      ))}

    

  );

}

```


## API Reference

### Options

| Option | Type | Default | Description |

|--------|------|---------|-------------|

| scale | number | 2 | Scale factor for rendering |

| quality | number | 0.8 | Image quality (0-1) |

| imageType | 'png' \| 'jpeg' | 'png' | Output format |

| withCredentials | boolean | false | Send credentials with request |

### Return Values

| Value | Type | Description |

|-------|------|-------------|

| images | string[] | Array of rendered page images |

| loading | boolean | Loading state |

| progress | number | Progress (0-1) |

| error | Error \| null | Error if any |

| renderPdf | function | Render PDF from URL |

| reset | function | Reset viewer state |

## License

MIT