# react-pdf-signer

> Es una librería open source para el posicionamiento del widget de una firma digital en un archivo PDF

Latest version **1.1.0** (published 2022-01-02) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2022-01-02 |
| First published | 2021-12-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 57 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Hans Medina |
| Maintainers | twd2206 |
| Keywords | react-pdf, react-pdf-signer |

## Links

- npm: https://www.npmjs.com/package/react-pdf-signer
- npm.io page: https://npm.io/package/react-pdf-signer

## Dependencies (7)

- [react](https://npm.io/package/react.md) ^17.0.2
- [pdf.js](https://npm.io/package/pdf.js.md) ^0.1.0
- [pdf-lib](https://npm.io/package/pdf-lib.md) ^1.17.1
- [round-to](https://npm.io/package/round-to.md) ^6.0.0
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [pdfjs-dist](https://npm.io/package/pdfjs-dist.md) ^2.12.313
- [react-feather](https://npm.io/package/react-feather.md) ^2.0.9

## Alternatives

- [@cantoo/pdf-lib](https://npm.io/package/@cantoo/pdf-lib.md) — 297.9K weekly downloads
- [datatables.net-buttons](https://npm.io/package/datatables.net-buttons.md) — 200.1K weekly downloads
- [@ckeditor/ckeditor5-export-pdf](https://npm.io/package/@ckeditor/ckeditor5-export-pdf.md) — 167.0K weekly downloads
- [scanbot-web-sdk](https://npm.io/package/scanbot-web-sdk.md) — 15.0K weekly downloads
- [@syncfusion/ej2-angular-pdfviewer](https://npm.io/package/@syncfusion/ej2-angular-pdfviewer.md) — 8.8K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2022-01-02
- 1.0.9 — 2021-12-29
- 1.0.8 — 2021-12-29
- 1.0.7 — 2021-12-29
- 1.0.6 — 2021-12-29
- 1.0.5 — 2021-12-29
- 1.0.4 — 2021-12-29
- 1.0.3 — 2021-12-29
- 1.0.2 — 2021-12-29
- 1.0.1 — 2021-12-29
- 1.0.0 — 2021-12-29
- 0.0.1 — 2021-12-29

## README

## React Pdf Signer

Es una librería open source para el posicionamiento del widget
de una firma digital en un archivo PDF

## Instalar

```
  npm install react-pdf-signer
```

## Example

[React Pdf Example](https://example-react-pdf-signer.vercel.app/)

## Importación del ViewerLayer y sus estilos

```js
import "react-pdf-signer/src/assets/css/index.css";
import { ViewerLayer } from "react-pdf-signer";
```

### Props

| Nombre   | Tipo      | Parámetros         |
| -------- | --------- | ------------------ |
| certInfo | TCertInfo | null               |
| onClose  | void      | null               |
| onSigner | void      | data: IEventSigner |
| file     | File      | null               |

### Interfaces

```js
interface IEventSigner {
  isVisibled: boolean
  certId: number
  page: number
  reason: string
  location: string
  positionX: number
  positionY: number
}

interface TCertInfo {
  id: number
  serialNumber: string
  displayTitle: string
  urlImage?: string
}

```

### Ejemplo

```tsx
import React, { useState } from "react";
import { ViewerLayer } from "react-pdf-signer";

interface IHandleFile {
  files: FileList;
}

function App() {
  const [file, setFile] = useState<File | undefined>(undefined);

  const handleFile = ({ files }: IHandleFile) => {
    if (!files.length) return;
    setFile(files[0]);
  };

  return (
    <div className="App">
      <input type="file" onChange={(e: any) => handleFile(e.target)} />

      {file?.name ? (
        <ViewerLayer
          certInfo={{
            id: 1,
            serialNumber: "000000005",
            displayTitle: "Hans Medina",
          }}
          file={file}
          onSigner={(data: any) => console.log(data)}
          onClose={() => setFile(undefined)}
        />
      ) : null}
    </div>
  );
}

export default App;
```

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