ReviewOS
Reload

also looking at this

stacks/ts-qr-codes

chore(deps): update dependency react-dom to 19.2.7

#2138
Closed chris wants to merge buddy-bot/update-major-update-react-dom into main
222 files +16350 -1825

Review threads live on the whole diff, not on one commit, so none are shown here - a thread's line means something in the branch's final form, and painting it into an intermediate step would put it on code it is not about.

docs/api/qr-code.mdmodified+206-29
@@ -1,46 +1,223 @@
1# QR Codes
2
3QR (Quick Response) codes are two-dimensional barcodes that can store various types of data including text, URLs, contact information, and more. qrx provides a robust QR code generation system with extensive customization options.
4
5## Basic Usage
6
7The simplest way to generate a QR code:
8
19```html
210<div id="qr-code"></div>
311
412<script type="text/javascript">
5new QRCode(document.getElementById("qr-code"), "https://stacksjs.org");
13import { QRCode } from '@stacksjs/qrx'
14
15new QRCode(document.getElementById("qr-code"), "https://stacksjs.org")
616</script>
717```
818
9If you want to customize the QR code, you can pass in an options object:
19[!NOTE] Image needed: Basic QR code example
1020
11```html
12<div id="qr-code"></div>
21## Advanced Configuration
22
23Customize the QR code appearance and behavior with options:
24
25```ts
26import { QRCode } from '@stacksjs/qrx'
1327
14<script type="text/javascript">
1528const options = {
16 width: 2,
17 height: 100,
18 format: 'auto',
19 displayValue: true,
20 fontOptions: '',
21 font: 'monospace',
22 text: undefined,
23 textAlign: 'center',
24 textPosition: 'bottom',
25 textMargin: 2,
26 fontSize: 20,
27 background: '#ffffff',
28 lineColor: '#000000',
29 margin: 10,
30 marginTop: undefined,
31 marginBottom: undefined,
32 marginLeft: undefined,
33 marginRight: undefined,
34 valid() { },
29 // Size Options
30 width: 256, // Width in pixels
31 height: 256, // Height in pixels
32 margin: 10, // Margin around QR code
33
34 // Color Options
35 colorDark: '#000000', // QR code color
36 colorLight: '#ffffff', // Background color
37
38 // Error Correction
39 correctLevel: QRErrorCorrectLevel.H, // H, Q, M, or L
40
41 // Rendering
42 useSVG: true, // Use SVG renderer instead of canvas
3543}
3644
37var qrCode = new QRCode(document.getElementById("qr-code"), options);
38</script>
45const qrCode = new QRCode(document.getElementById("qr-code"), options)
46```
47
48## Error Correction Levels
49
50QR codes support four levels of error correction:
51
52```ts
53import { QRCode, QRErrorCorrectLevel } from '@stacksjs/qrx'
54
55// Low - 7% recovery capacity
56new QRCode(element, {
57 correctLevel: QRErrorCorrectLevel.L
58})
59
60// Medium - 15% recovery capacity
61new QRCode(element, {
62 correctLevel: QRErrorCorrectLevel.M
63})
64
65// Quartile - 25% recovery capacity
66new QRCode(element, {
67 correctLevel: QRErrorCorrectLevel.Q
68})
69
70// High - 30% recovery capacity
71new QRCode(element, {
72 correctLevel: QRErrorCorrectLevel.H
73})
74```
75
76[!NOTE] Image needed: Visual comparison of error correction levels
77
78## Methods
79
80Interact with generated QR codes:
81
82```ts
83const qrCode = new QRCode(element, options)
84
85// Clear the QR code
86qrCode.clear()
87
88// Generate new code
89qrCode.makeCode('https://docs.stacksjs.org')
90```
91
92## Data Types
93
94QR codes can encode various types of data:
95
96```ts
97// URL
98new QRCode(element, 'https://stacksjs.org')
99
100// Plain Text
101new QRCode(element, 'Hello World!')
102
103// Contact Information (vCard)
104new QRCode(element, `
105BEGIN:VCARD
106VERSION:3.0
107FN:John Doe
108TEL:123-456-7890
109EMAIL:john@example.com
110END:VCARD
111`)
112
113// WiFi Configuration
114new QRCode(element, `
115WIFI:T:WPA;S:NetworkName;P:Password123;;
116`)
117```
118
119[!NOTE] Image needed: Examples of different data type encodings
120
121## Styling Options
122
123### Size and Margins
124
125```ts
126new QRCode(element, {
127 width: 256,
128 height: 256,
129 margin: 10,
130 marginTop: 20,
131 marginBottom: 20,
132 marginLeft: 15,
133 marginRight: 15
134})
135```
136
137### Colors and Appearance
138
139```ts
140new QRCode(element, {
141 colorDark: '#000000',
142 colorLight: '#ffffff',
143 useSVG: true
144})
39145```
40146
41You can also use methods to interact with the QR code:
147## Best Practices
148
1491. **Error Correction**
150 - Use higher levels for printed QR codes
151 - Use lower levels for digital display
152 - Consider environment factors
153
1542. **Size Guidelines**
155 - Minimum size: 2cm × 2cm for print
156 - Maintain 1:1 aspect ratio
157 - Include adequate quiet zone
158
1593. **Content Optimization**
160 - Keep data minimal
161 - Use URL shorteners
162 - Test scanning distance
163
164## Common Applications
165
1661. **Marketing**
167 - Website URLs
168 - Product information
169 - Campaign tracking
170
1712. **Business**
172 - Digital business cards
173 - Contact information
174 - WiFi access
175
1763. **Authentication**
177 - Two-factor authentication
178 - Ticket validation
179 - Access control
180
181[!NOTE] Image needed: Real-world application examples
182
183## Error Handling
42184
43185```ts
44qrCode.clear() // clear the code
45qrCode.makeCode('https://docs.stacksjs.org') // create another code
186try {
187 const qrCode = new QRCode(element, {
188 text: 'https://stacksjs.org',
189 width: 256,
190 height: 256,
191 correctLevel: QRErrorCorrectLevel.H,
192 valid(valid) {
193 if (!valid)
194 console.error('QR code generation failed')
195 }
196 })
197}
198catch (error) {
199 console.error('Error generating QR code:', error)
200}
46201```
202
203## Technical Specifications
204
2051. **Version Information**
206 - 40 versions (1-40)
207 - Increasing data capacity
208 - Module size variations
209
2102. **Data Capacity**
211 - Numeric: Up to 7,089 characters
212 - Alphanumeric: Up to 4,296 characters
213 - Binary: Up to 2,953 bytes
214 - Kanji: Up to 1,817 characters
215
2163. **Structure**
217 - Finder patterns
218 - Alignment patterns
219 - Timing patterns
220 - Format information
221 - Data and error correction
222
223[!NOTE] Image needed: Technical structure diagram