@react-pdf-levelup/qr 1.1.4 → 1.1.6
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.
- package/README.md +22 -15
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
|
+
# `@react-pdf-levelup/qr`
|
|
2
|
+
|
|
3
|
+
Paquete de componentes y utilidades para generar códigos QR estilizados dentro de plantillas PDF (React + `@react-pdf/renderer`) y en el frontend.
|
|
4
|
+
|
|
1
5
|
<p align="center">
|
|
2
6
|
<img src="https://genarogg.github.io/media/react-pdf-levelup/logo-de-react-pdf-levelup.png" alt="react-pdf-levelup logo" width="160" />
|
|
3
7
|
</p>
|
|
4
8
|
|
|
5
|
-
|
|
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.
|
|
9
|
+
## NOTA IMPORTANTE ESTA LIBRERIA ES UN COMPLEMENTO DE @react-pdf-levelup/core
|
|
8
10
|
|
|
9
11
|
## Instalación
|
|
10
12
|
|
|
@@ -20,9 +22,9 @@ npm install @react-pdf-levelup/qr
|
|
|
20
22
|
## Uso en plantillas PDF (ejemplo mínimo)
|
|
21
23
|
|
|
22
24
|
```tsx
|
|
23
|
-
import React from
|
|
24
|
-
import { Document, Page } from
|
|
25
|
-
import { QR } from
|
|
25
|
+
import React from "react";
|
|
26
|
+
import { Document, Page } from "@react-pdf/renderer";
|
|
27
|
+
import { QR } from "@react-pdf-levelup/qr";
|
|
26
28
|
|
|
27
29
|
const MyPdfTemplate = ({ data }) => (
|
|
28
30
|
<Document>
|
|
@@ -37,6 +39,7 @@ export default MyPdfTemplate;
|
|
|
37
39
|
```
|
|
38
40
|
|
|
39
41
|
Props comunes de `QR` (ejemplos):
|
|
42
|
+
|
|
40
43
|
- `value` (string): contenido del QR (URL, texto).
|
|
41
44
|
- `size` (number): tamaño en px.
|
|
42
45
|
- `style` (object): estilo generado por `QRStyle` o un objeto inline con colores y forma.
|
|
@@ -44,15 +47,15 @@ Props comunes de `QR` (ejemplos):
|
|
|
44
47
|
## Personalizar apariencia con `QRStyle` (ejemplos)
|
|
45
48
|
|
|
46
49
|
```ts
|
|
47
|
-
import { QRStyle } from
|
|
50
|
+
import { QRStyle } from "@react-pdf-levelup/qr";
|
|
48
51
|
|
|
49
52
|
// Genera un objeto estilo reutilizable
|
|
50
53
|
const style = QRStyle({
|
|
51
|
-
dotColor:
|
|
52
|
-
backgroundColor:
|
|
53
|
-
eyeColor:
|
|
54
|
+
dotColor: "#0b74de",
|
|
55
|
+
backgroundColor: "#ffffff",
|
|
56
|
+
eyeColor: "#0b74de",
|
|
54
57
|
eyeRadius: 4,
|
|
55
|
-
dotShape:
|
|
58
|
+
dotShape: "rounded",
|
|
56
59
|
});
|
|
57
60
|
|
|
58
61
|
// Usarlo en el componente QR
|
|
@@ -64,12 +67,15 @@ const style = QRStyle({
|
|
|
64
67
|
Frontend (vista previa y generación):
|
|
65
68
|
|
|
66
69
|
```tsx
|
|
67
|
-
import React from
|
|
68
|
-
import { QRGenerator, QRstyleGenerator } from
|
|
70
|
+
import React from "react";
|
|
71
|
+
import { QRGenerator, QRstyleGenerator } from "@react-pdf-levelup/qr";
|
|
69
72
|
|
|
70
73
|
function Preview() {
|
|
71
|
-
const qrValue =
|
|
72
|
-
const previewStyle = QRstyleGenerator({
|
|
74
|
+
const qrValue = "https://react-pdf-levelup.nimbux.cloud";
|
|
75
|
+
const previewStyle = QRstyleGenerator({
|
|
76
|
+
dotColor: "#222",
|
|
77
|
+
eyeColor: "#ff6b6b",
|
|
78
|
+
});
|
|
73
79
|
|
|
74
80
|
return (
|
|
75
81
|
<div>
|
|
@@ -83,6 +89,7 @@ export default Preview;
|
|
|
83
89
|
```
|
|
84
90
|
|
|
85
91
|
## Notes
|
|
92
|
+
|
|
86
93
|
- Asegúrate de compilar el paquete (`dist/`) antes de publicar.
|
|
87
94
|
- `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
95
|
|