Skip to content

Commit d207fd7

Browse files
committed
added documentation
1 parent cd8d37f commit d207fd7

File tree

1 file changed

+73
-0
lines changed

1 file changed

+73
-0
lines changed

docs/components/qrcode.md

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
---
2+
title: QR Code
3+
description: Displays a QR code image
4+
slug: qr-code
5+
type: component
6+
---
7+
8+
<!--@include: @/include/header.md-->
9+
10+
<!--@include: @/include/install.md-->
11+
12+
## Usage
13+
14+
Add the `QrCode` component to your email template to display a QR code. You can specify the content of the QR code, its size, and the error correction level. Include styles as needed.
15+
16+
```jsx
17+
import { QrCode } from 'jsx-email';
18+
19+
const Email = () => {
20+
return (
21+
<QrCode
22+
src="https://example.com"
23+
alt="QR Code"
24+
size={300}
25+
correctionLevel="H"
26+
/>
27+
);
28+
};
29+
```
30+
31+
::: tip
32+
The `QrCode` component generates a QR code based on the provided `src` prop. It supports various customization options such as size and error correction level.
33+
:::
34+
35+
## Component Props
36+
37+
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:
38+
39+
### Props
40+
41+
```ts
42+
correctionLevel: 'L' | 'M' | 'H';
43+
```
44+
45+
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).
46+
47+
```ts
48+
size: number;
49+
```
50+
51+
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.
52+
53+
```ts
54+
width?: number;
55+
```
56+
57+
(Optional) The width of the wrapping image in pixels. If not provided, the `size` value will be used.
58+
59+
```ts
60+
height?: number;
61+
```
62+
63+
(Optional) The height of the wrapping image in pixels. If not provided, the `size` value will be used.
64+
65+
```ts
66+
style?: React.CSSProperties;
67+
```
68+
69+
(Optional) Custom CSS styles to be applied to the QR code image.
70+
71+
::: note
72+
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.
73+
:::

0 commit comments

Comments
 (0)