# react-pdf-view

> [![NPM version](https://badge.fury.io/js/react-pdf-view.svg)](http://badge.fury.io/js/react-pdf-view)

Latest version **0.1.2** (published 2020-02-26) · 0 weekly downloads

## Install

```sh
npm install react-pdf-view
pnpm add react-pdf-view
yarn add react-pdf-view
bun add react-pdf-view
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2020-02-26 |
| First published | 2020-02-24 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 28.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | kissdigital-com |

## Links

- npm: https://www.npmjs.com/package/react-pdf-view
- Homepage: https://github.com/kissdigital-com/react-pdf-view
- npm.io page: https://npm.io/package/react-pdf-view

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^16.12.0
- [pdfjs-dist](https://npm.io/package/pdfjs-dist.md) ^2.2.228
- [react-scripts](https://npm.io/package/react-scripts.md) 3.4.0

## Recent versions

- 0.1.2 (latest) — 2020-02-26
- 0.1.1 — 2020-02-24
- 0.1.0 — 2020-02-24

## README

# react-pdf-view

[![NPM version](https://badge.fury.io/js/react-pdf-view.svg)](http://badge.fury.io/js/react-pdf-view)

## Description

PDF viewer component for React apps based on Render Props pattern.

## Installation

Install npm package:

`npm install react-pdf-view`

## Example usage

```jsx
<PDFViewer src={pdf} zoomStep={10} minZoom={20}>
  {({
    Viewer,
    onNextPage,
    onPrevPage,
    onIncreaseZoom,
    onDecreaseZoom,
    onRotateRight,
    onRotateLeft,
    getDocumentData,
  }) => {
    const {
      isLoading,
      currentPage,
      error,
      rotationValue,
      totalPages,
      zoomValue,
    } = getDocumentData();

    return (
      <div>
        {!isLoading && <Viewer />}
        <button onClick={onPrevPage}>Prev</button>
        <button onClick={onNextPage}>Next</button>
        <button onClick={onDecreaseZoom}>-</button>
        <button onClick={onIncreaseZoom}>+</button>
        <button onClick={onRotateLeft}>Rotate left</button>
        <button onClick={onRotateRight}>Rotate right</button>
      </div>
    );
  }}
</PDFViewer>
```

## Documentation

PDF viewer share some useful functions via render props pattern:

- `Viewer` - canvas element contains rendered page
- `onNextPage` - next page handler
- `onPrevPage` - prev page handler
- `onDecreaseZoom` - decrease zoom handler
- `onIncreaseZoom` - increase zoom handler
- `onRotateLeft` - rotate left handler
- `onRotateRight` - rotate right handler
- `getDocumentData` - function which returns some additional data about PDF file and renderer state
  - isLoading - loading state
  - currentPage - current page
  - error - error messages
  - rotationValue - rotation value
  - totalPages - total pages value
  - zoomValue - zoom value

## About KISS digital

KISS digital is a digital agency located in Kraków, Poland. We provide creative, strategic and technical development of websites and mobile applications.

## Contributors

[@kpowroznik](https://github.com/KPowroznik)

---
_Source: https://npm.io/package/react-pdf-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._