You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/components/qrcode.md
+30-9Lines changed: 30 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -7,6 +7,10 @@ type: component
7
7
8
8
<!--@include: @/include/header.md-->
9
9
10
+
::: warning
11
+
This component utilizes the base64 image format to inline the QR Code image. Please note that not all email clients support that image format. See https://www.caniemail.com/features/image-base64/ for more information.
12
+
:::
13
+
10
14
<!--@include: @/include/install.md-->
11
15
12
16
## Usage
@@ -27,7 +31,16 @@ The `QrCode` component generates a QR code based on the provided `src` prop. It
27
31
28
32
## Component Props
29
33
30
-
In addition to expressing all of the [Common Component Props](https://react.dev/reference/react-dom/components/common) for `ComponentProps<'img'>`, `QrCode` accepts the following custom props:
The error correction level for the QR code. Higher levels offer more resilience at the cost of reduced storage capacity. The available levels are 'L' (low), 'M' (medium), and 'H' (high).
39
52
40
53
```ts
41
-
size: number;
54
+
height?:number;
42
55
```
43
56
44
-
The size of the QR code in pixels. This size will apply to both width and height unless overridden by specific `width` or `height` props.
57
+
(Optional) The height of the wrapping image in pixels. If not provided, the `size` value will be used.
45
58
46
59
```ts
47
-
width?:number;
60
+
size: number;
48
61
```
49
62
50
-
(Optional) The width of the wrapping image in pixels. If not provided, the `size` value will be used.
63
+
The size of the QR code in pixels. This size will apply to both width and height unless overridden by specific `width` or `height` props.
51
64
52
65
```ts
53
-
height?:number;
66
+
src: string;
54
67
```
55
68
56
-
(Optional) The height of the wrapping image in pixels. If not provided, the `size` value will be used.
69
+
The data or URL you want to encode in the QR code. The QR code will be generated dynamically based on this content.
57
70
58
71
```ts
59
72
style?:React.CSSProperties;
60
73
```
61
74
62
75
(Optional) Custom CSS styles to be applied to the QR code image.
63
76
64
-
::: note
65
-
Ensure that the `src` prop contains the data or URL you want to encode in the QR code. The QR code will be generated dynamically based on this content.
77
+
```ts
78
+
width?:number;
79
+
```
80
+
81
+
(Optional) The width of the wrapping image in pixels. If not provided, the `size` value will be used.
82
+
83
+
::: tip
84
+
This component also expresses all of the [Common Component Props](https://react.dev/reference/react-dom/components/common) for `ComponentProps<'img'>`
0 commit comments