Skip to content

Commit 4f0b9b8

Browse files
authored
docs: update README
1 parent d327782 commit 4f0b9b8

File tree

1 file changed

+30
-9
lines changed

1 file changed

+30
-9
lines changed

docs/components/qrcode.md

Lines changed: 30 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ type: component
77

88
<!--@include: @/include/header.md-->
99

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+
1014
<!--@include: @/include/install.md-->
1115

1216
## Usage
@@ -27,7 +31,16 @@ The `QrCode` component generates a QR code based on the provided `src` prop. It
2731

2832
## Component Props
2933

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:
34+
```ts
35+
interface QrProps extends RootProps {
36+
correctionLevel: 'L' | 'M' | 'H';
37+
height?: number;
38+
size: number;
39+
src: string;
40+
style?: React.CSSProperties;
41+
width?: number;
42+
}
43+
```
3144

3245
### Props
3346

@@ -38,29 +51,37 @@ correctionLevel: 'L' | 'M' | 'H';
3851
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).
3952

4053
```ts
41-
size: number;
54+
height?: number;
4255
```
4356

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.
4558

4659
```ts
47-
width?: number;
60+
size: number;
4861
```
4962

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.
5164

5265
```ts
53-
height?: number;
66+
src: string;
5467
```
5568

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.
5770

5871
```ts
5972
style?: React.CSSProperties;
6073
```
6174

6275
(Optional) Custom CSS styles to be applied to the QR code image.
6376

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'>`
6685
:::
86+
87+

0 commit comments

Comments
 (0)