# react-paper-viewer

> Paper viewer for react

Latest version **0.3.2** (published 2022-07-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-paper-viewer
pnpm add react-paper-viewer
yarn add react-paper-viewer
bun add react-paper-viewer
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.2 |
| Published | 2022-07-22 |
| First published | 2022-05-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 22.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Frourio Inc. |
| Maintainers | solufa |

## Links

- npm: https://www.npmjs.com/package/react-paper-viewer
- Repository: https://github.com/frouriolabs/react-paper-viewer
- Homepage: https://github.com/frouriolabs/react-paper-viewer#readme
- Issues: https://github.com/frouriolabs/react-paper-viewer/issues
- npm.io page: https://npm.io/package/react-paper-viewer

## Dependencies (1)

- [html2canvas](https://npm.io/package/html2canvas.md) ^1.4.1

## Recent versions

- 0.3.2 (latest) — 2022-07-22
- 0.3.1 — 2022-07-22
- 0.3.0 — 2022-07-22
- 0.2.0 — 2022-06-04
- 0.1.2 — 2022-06-04
- 0.1.1 — 2022-05-26
- 0.1.0 — 2022-05-03

## README

# React Paper Viewer

```sh
$ yarn add react-paper-viewer
```

```tsx
import { useRef } from 'react'
import { PaperViewer } from 'react-paper-viewer'
import type { PaperViewerToCanvas } from './components/PaperViewer'

function App() {
  const toCanvasRef = useRef<PaperViewerToCanvas>()
  const download = async () => {
    if (!toCanvasRef.current) return

    const canvas = await toCanvasRef.current()
    const dataURL = canvas.toDataURL()
    const a = document.createElement('a')
    a.download = 'sample.png'
    a.href = dataURL
    a.click()
  }

  return (
    <>
      <PaperViewer
        src="/src/logo.svg"
        onInit={({ toCanvas }) => {
          toCanvasRef.current = toCanvas
        }}
      />
      <button onClick={download}>Download</button>
    </>
  )
}

export default App
```

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