@react-pdf-levelup/client 1.1.22 → 1.1.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +52 -89
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,89 +1,52 @@
1
- <p align="center">
2
- <img src="https://genarogg.github.io/media/react-pdf-levelup/logo-de-react-pdf-levelup.png" alt="react-pdf-levelup logo" width="160" />
3
- </p>
4
-
5
- # `@react-pdf-levelup/qr`
6
-
7
- > Paquete de componentes y utilidades para generar códigos QR estilizados dentro de plantillas PDF (React + `@react-pdf/renderer`) y en el frontend.
8
-
9
- ## Instalación
10
-
11
- ```bash
12
- npm install @react-pdf-levelup/qr
13
- ```
14
-
15
- ## Componentes principales
16
-
17
- - `QR`: componente para insertar un código QR en una plantilla PDF.
18
- - `QRStyle`: utilidades/constructores para generar estilos personalizados de QR (colores, forma de puntos, máscaras, etc.).
19
-
20
- ## Uso en plantillas PDF (ejemplo mínimo)
21
-
22
- ```tsx
23
- import React from 'react';
24
- import { Document, Page } from '@react-pdf/renderer';
25
- import { QR } from '@react-pdf-levelup/qr';
26
-
27
- const MyPdfTemplate = ({ data }) => (
28
- <Document>
29
- <Page size="A4">
30
- {/* QR simple */}
31
- <QR value={data.url} size={120} />
32
- </Page>
33
- </Document>
34
- );
35
-
36
- export default MyPdfTemplate;
37
- ```
38
-
39
- Props comunes de `QR` (ejemplos):
40
- - `value` (string): contenido del QR (URL, texto).
41
- - `size` (number): tamaño en px.
42
- - `style` (object): estilo generado por `QRStyle` o un objeto inline con colores y forma.
43
-
44
- ## Personalizar apariencia con `QRStyle` (ejemplos)
45
-
46
- ```ts
47
- import { QRStyle } from '@react-pdf-levelup/qr';
48
-
49
- // Genera un objeto estilo reutilizable
50
- const style = QRStyle({
51
- dotColor: '#0b74de',
52
- backgroundColor: '#ffffff',
53
- eyeColor: '#0b74de',
54
- eyeRadius: 4,
55
- dotShape: 'rounded'
56
- });
57
-
58
- // Usarlo en el componente QR
59
- // <QR value="https://example.com" size={140} style={style} />
60
- ```
61
-
62
- ## Ejemplo avanzado (preview + export)
63
-
64
- Frontend (vista previa y generación):
65
-
66
- ```tsx
67
- import React from 'react';
68
- import { QRGenerator, QRstyleGenerator } from '@react-pdf-levelup/qr';
69
-
70
- function Preview() {
71
- const qrValue = 'https://react-pdf-levelup.nimbux.cloud';
72
- const previewStyle = QRstyleGenerator({ dotColor: '#222', eyeColor: '#ff6b6b' });
73
-
74
- return (
75
- <div>
76
- <h3>Previsualización QR</h3>
77
- <QRGenerator value={qrValue} size={180} style={previewStyle} />
78
- </div>
79
- );
80
- }
81
-
82
- export default Preview;
83
- ```
84
-
85
- ## Notes
86
- - Asegúrate de compilar el paquete (`dist/`) antes de publicar.
87
- - `QRStyle`/`QRGenerator` APIs pueden variar según la versión; revisa los archivos fuente `frontend/src/components/core/qr` si necesitas adaptar propiedades concretas.
88
-
89
- Si quieres, puedo actualizar README con la API exacta detectada en `frontend/src/components/core/qr` y añadir ejemplos concretos basados en las props reales.
1
+ <p align="center">
2
+ <img src="https://genarogg.github.io/media/react-pdf-levelup/logo-de-react-pdf-levelup.png" alt="react-pdf-levelup logo" width="160" />
3
+ </p>
4
+
5
+ # `@react-pdf-levelup/client`
6
+
7
+ Utilidad de frontend para decodificar un PDF en base64 y descargarlo/abrirlo en el navegador.
8
+
9
+ ## Instalación
10
+
11
+ ```bash
12
+ npm install @react-pdf-levelup/client
13
+ ```
14
+
15
+ ## API
16
+
17
+ ### decodeBase64Pdf
18
+
19
+ Decodifica un string en base64 correspondiente a un PDF, genera un Blob tipo `application/pdf`, dispara la descarga y abre el documento en una nueva pestaña. Limpia automáticamente el `ObjectURL` creado.
20
+
21
+ Firma:
22
+
23
+ ```ts
24
+ decodeBase64Pdf(base64: string, fileName: string): void
25
+ ```
26
+
27
+ Parámetros:
28
+ - `base64`: contenido del PDF en base64 (sin prefijo `data:application/pdf;base64,`).
29
+ - `fileName`: nombre del archivo a descargar, por ejemplo `documento.pdf`.
30
+
31
+ ### Ejemplo básico (frontend)
32
+
33
+ ```ts
34
+ import { decodeBase64Pdf } from '@react-pdf-levelup/client'
35
+
36
+ const base64 = '...'; // PDF en base64
37
+ decodeBase64Pdf(base64, 'mi-documento.pdf')
38
+ ```
39
+
40
+ ### Ejemplo tras generar el PDF
41
+
42
+ Si ya generaste el PDF en base64 (por ejemplo con `react-pdf-levelup`):
43
+
44
+ ```ts
45
+ import { generatePDF } from 'react-pdf-levelup'
46
+ import { decodeBase64Pdf } from '@react-pdf-levelup/client'
47
+ import Template from './MyTemplate'
48
+
49
+ const pdfBase64 = await generatePDF({ template: Template, data: { title: 'Demo' } })
50
+ decodeBase64Pdf(pdfBase64, 'demo.pdf')
51
+ ```
52
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-pdf-levelup/client",
3
- "version": "1.1.22",
3
+ "version": "1.1.25",
4
4
  "description": "",
5
5
  "license": "ISC",
6
6
  "author": "",