Skip to content

Commit a26c99f

Browse files
meabedmeabed
committed
chore: update code and test
1 parent 8d95b11 commit a26c99f

File tree

3 files changed

+74
-92
lines changed

3 files changed

+74
-92
lines changed

‎README.md‎

Lines changed: 62 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
- 📦 **Lightweight**: Zero dependencies, small bundle size
2222
- 🔧 **TypeScript**: Full TypeScript support
2323
- ⚡ **Performance**: Optimized rendering with React hooks
24+
2425
## 📦 Installation
2526

2627
```bash
@@ -39,21 +40,19 @@ pnpm add @devmehq/react-qr-code
3940
### Basic Usage
4041

4142
```tsx
42-
import React from 'react';
43-
import { ReactQrCode } from '@devmehq/react-qr-code';
43+
import React from 'react'
44+
import { ReactQrCode } from '@devmehq/react-qr-code'
4445

4546
function App() {
46-
return (
47-
<ReactQrCode value="https://github.com/devmehq/react-qr-code" />
48-
);
47+
return <ReactQrCode value="https://github.com/devmehq/react-qr-code" />
4948
}
5049
```
5150

5251
### With Custom Styling
5352

5453
```tsx
55-
import React from 'react';
56-
import { ReactQrCode } from '@devmehq/react-qr-code';
54+
import React from 'react'
55+
import { ReactQrCode } from '@devmehq/react-qr-code'
5756

5857
function StyledQRCode() {
5958
return (
@@ -67,15 +66,15 @@ function StyledQRCode() {
6766
style={{ borderRadius: '8px' }}
6867
className="shadow-lg"
6968
/>
70-
);
69+
)
7170
}
7271
```
7372

7473
### Canvas Rendering
7574

7675
```tsx
77-
import React from 'react';
78-
import { ReactQrCode } from '@devmehq/react-qr-code';
76+
import React from 'react'
77+
import { ReactQrCode } from '@devmehq/react-qr-code'
7978

8079
function CanvasQRCode() {
8180
return (
@@ -84,15 +83,15 @@ function CanvasQRCode() {
8483
renderAs="canvas"
8584
size={256}
8685
/>
87-
);
86+
)
8887
}
8988
```
9089

9190
### With Logo/Image
9291

9392
```tsx
94-
import React from 'react';
95-
import { ReactQrCode } from '@devmehq/react-qr-code';
93+
import React from 'react'
94+
import { ReactQrCode } from '@devmehq/react-qr-code'
9695

9796
function QRCodeWithLogo() {
9897
return (
@@ -108,56 +107,56 @@ function QRCodeWithLogo() {
108107
},
109108
]}
110109
/>
111-
);
110+
)
112111
}
113112
```
114113

115114
## 📖 API Reference
116115

117116
### ReactQrCode Props
118117

119-
| Prop | Type | Default | Description |
120-
|--------------|------------------------------|---------------|------------------------------------------------------|
121-
| `value` | `string` | **Required** | The value to encode in the QR code |
122-
| `renderAs` | `'svg' \| 'canvas'` | `'svg'` | Render format (SVG or Canvas) |
123-
| `size` | `number` | `256` | Size of the QR code in pixels |
124-
| `bgColor` | `string` | `'#ffffff'` | Background color (CSS color value) |
125-
| `fgColor` | `string` | `'#000000'` | Foreground color (CSS color value) |
126-
| `level` | `'L' \| 'M' \| 'Q' \| 'H'` | `'L'` | Error correction level |
127-
| `marginSize` | `number` | `0` | Margin around the QR code in pixels |
128-
| `style` | `CSSProperties` | `undefined` | React style object |
129-
| `className` | `string` | `undefined` | CSS class name |
130-
| `title` | `string` | `undefined` | Title for SVG accessibility |
131-
| `id` | `string` | `undefined` | HTML id attribute |
132-
| `images` | `ReactQrCodeImageProps[]` | `undefined` | Array of images to embed in the QR code |
118+
| Prop | Type | Default | Description |
119+
| ------------ | -------------------------- | ------------ | --------------------------------------- |
120+
| `value` | `string` | **Required** | The value to encode in the QR code |
121+
| `renderAs` | `'svg' \| 'canvas'` | `'svg'` | Render format (SVG or Canvas) |
122+
| `size` | `number` | `256` | Size of the QR code in pixels |
123+
| `bgColor` | `string` | `'#ffffff'` | Background color (CSS color value) |
124+
| `fgColor` | `string` | `'#000000'` | Foreground color (CSS color value) |
125+
| `level` | `'L' \| 'M' \| 'Q' \| 'H'` | `'L'` | Error correction level |
126+
| `marginSize` | `number` | `0` | Margin around the QR code in pixels |
127+
| `style` | `CSSProperties` | `undefined` | React style object |
128+
| `className` | `string` | `undefined` | CSS class name |
129+
| `title` | `string` | `undefined` | Title for SVG accessibility |
130+
| `id` | `string` | `undefined` | HTML id attribute |
131+
| `images` | `ReactQrCodeImageProps[]` | `undefined` | Array of images to embed in the QR code |
133132

134133
### ReactQrCodeImageProps
135134

136-
| Property | Type | Default | Description |
137-
|------------|-----------|-------------------|------------------------------------------------|
138-
| `src` | `string` | **Required** | Image source URL |
139-
| `x` | `number` | Auto-centered | X position of the image |
140-
| `y` | `number` | Auto-centered | Y position of the image |
141-
| `height` | `number` | 10% of QR size | Height of the image |
142-
| `width` | `number` | 10% of QR size | Width of the image |
143-
| `excavate` | `boolean` | `false` | Whether to clear QR modules behind the image |
135+
| Property | Type | Default | Description |
136+
| ---------- | --------- | -------------- | -------------------------------------------- |
137+
| `src` | `string` | **Required** | Image source URL |
138+
| `x` | `number` | Auto-centered | X position of the image |
139+
| `y` | `number` | Auto-centered | Y position of the image |
140+
| `height` | `number` | 10% of QR size | Height of the image |
141+
| `width` | `number` | 10% of QR size | Width of the image |
142+
| `excavate` | `boolean` | `false` | Whether to clear QR modules behind the image |
144143

145144
### Error Correction Levels
146145

147146
| Level | Error Correction | Data Capacity |
148-
|-------|-----------------|---------------|
149-
| `L` | ~7% | High |
150-
| `M` | ~15% | Medium |
151-
| `Q` | ~25% | Medium-Low |
152-
| `H` | ~30% | Low |
147+
| ----- | ---------------- | ------------- |
148+
| `L` | ~7% | High |
149+
| `M` | ~15% | Medium |
150+
| `Q` | ~25% | Medium-Low |
151+
| `H` | ~30% | Low |
153152

154153
## 🎨 Styling & Customization
155154

156155
### Responsive Design
157156

158157
```tsx
159-
import React from 'react';
160-
import { ReactQrCode } from '@devmehq/react-qr-code';
158+
import React from 'react'
159+
import { ReactQrCode } from '@devmehq/react-qr-code'
161160

162161
function ResponsiveQRCode() {
163162
return (
@@ -168,15 +167,15 @@ function ResponsiveQRCode() {
168167
style={{ width: '100%', height: 'auto' }}
169168
/>
170169
</div>
171-
);
170+
)
172171
}
173172
```
174173

175174
### Dark Mode Support
176175

177176
```tsx
178-
import React from 'react';
179-
import { ReactQrCode } from '@devmehq/react-qr-code';
177+
import React from 'react'
178+
import { ReactQrCode } from '@devmehq/react-qr-code'
180179

181180
function DarkModeQRCode({ isDarkMode }) {
182181
return (
@@ -185,16 +184,16 @@ function DarkModeQRCode({ isDarkMode }) {
185184
bgColor={isDarkMode ? '#1f2937' : '#ffffff'}
186185
fgColor={isDarkMode ? '#f3f4f6' : '#000000'}
187186
/>
188-
);
187+
)
189188
}
190189
```
191190

192191
### Custom CSS Classes
193192

194193
```tsx
195-
import React from 'react';
196-
import { ReactQrCode } from '@devmehq/react-qr-code';
197-
import './styles.css';
194+
import React from 'react'
195+
import { ReactQrCode } from '@devmehq/react-qr-code'
196+
import './styles.css'
198197

199198
function CustomStyledQRCode() {
200199
return (
@@ -203,7 +202,7 @@ function CustomStyledQRCode() {
203202
className="qr-code-custom"
204203
size={300}
205204
/>
206-
);
205+
)
207206
}
208207
```
209208

@@ -225,15 +224,9 @@ function CustomStyledQRCode() {
225224

226225
```tsx
227226
function WiFiQRCode({ ssid, password, security = 'WPA' }) {
228-
const wifiString = `WIFI:T:${security};S:${ssid};P:${password};;`;
229-
230-
return (
231-
<ReactQrCode
232-
value={wifiString}
233-
size={256}
234-
level="H"
235-
/>
236-
);
227+
const wifiString = `WIFI:T:${security};S:${ssid};P:${password};;`
228+
229+
return <ReactQrCode value={wifiString} size={256} level="H" />
237230
}
238231
```
239232

@@ -246,24 +239,18 @@ VERSION:3.0
246239
FN:${name}
247240
TEL:${phone}
248241
EMAIL:${email}
249-
END:VCARD`;
250-
251-
return (
252-
<ReactQrCode
253-
value={vCard}
254-
size={256}
255-
level="M"
256-
/>
257-
);
242+
END:VCARD`
243+
244+
return <ReactQrCode value={vCard} size={256} level="M" />
258245
}
259246
```
260247

261248
### Two-Factor Authentication
262249

263250
```tsx
264251
function TwoFactorQRCode({ secret, issuer, accountName }) {
265-
const otpauth = `otpauth://totp/${issuer}:${accountName}?secret=${secret}&issuer=${issuer}`;
266-
252+
const otpauth = `otpauth://totp/${issuer}:${accountName}?secret=${secret}&issuer=${issuer}`
253+
267254
return (
268255
<ReactQrCode
269256
value={otpauth}
@@ -278,30 +265,22 @@ function TwoFactorQRCode({ secret, issuer, accountName }) {
278265
},
279266
]}
280267
/>
281-
);
268+
)
282269
}
283270
```
284271

285272
### Payment Links
286273

287274
```tsx
288275
function PaymentQRCode({ amount, recipient, currency = 'USD' }) {
289-
const paymentLink = `https://pay.example.com/?to=${recipient}&amount=${amount}&currency=${currency}`;
290-
291-
return (
292-
<ReactQrCode
293-
value={paymentLink}
294-
size={300}
295-
level="H"
296-
marginSize={4}
297-
/>
298-
);
276+
const paymentLink = `https://pay.example.com/?to=${recipient}&amount=${amount}&currency=${currency}`
277+
278+
return <ReactQrCode value={paymentLink} size={300} level="H" marginSize={4} />
299279
}
300280
```
301281

302282
<img src="https://github.com/devmehq/react-qr-code/raw/master/examples/qrcode-demo.png" alt="qrcode-demo">
303283

304-
305284
## 🧪 Testing
306285

307286
```bash

‎jest.config.js‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,16 @@ module.exports = {
44
roots: ['<rootDir>/src'],
55
testMatch: ['**/__tests__/**/*.ts?(x)', '**/?(*.)+(spec|test).ts?(x)'],
66
transform: {
7-
'^.+\\.(ts|tsx)$': ['ts-jest', {
8-
tsconfig: {
9-
jsx: 'react',
10-
esModuleInterop: true,
11-
allowSyntheticDefaultImports: true
12-
}
13-
}],
7+
'^.+\\.(ts|tsx)$': [
8+
'ts-jest',
9+
{
10+
tsconfig: {
11+
jsx: 'react',
12+
esModuleInterop: true,
13+
allowSyntheticDefaultImports: true,
14+
},
15+
},
16+
],
1417
},
1518
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
1619
collectCoverageFrom: [
@@ -25,4 +28,4 @@ module.exports = {
2528
moduleNameMapper: {
2629
'\\.(css|less|scss|sass)$': 'identity-obj-proxy',
2730
},
28-
}
31+
}

‎jest.setup.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,4 +38,4 @@ global.Image = class {
3838
this.onload = null
3939
this.src = ''
4040
}
41-
}
41+
}

0 commit comments

Comments
 (0)