# Qr Code

Render scannable QR codes with a frame, overlay, pattern, and download trigger.

```tsx
import { QrCode } from '@skeletonlabs/skeleton-react';
import favicon from '@/assets/favicon.png';

export default function Default() {
	return (
		<QrCode value="https://skeleton.dev">
			<QrCode.Frame className="size-full max-size-36">
				<QrCode.Pattern />
			</QrCode.Frame>
			<QrCode.Overlay>
				<img src={favicon.src} alt="Skeleton Logo" className="size-12" />
			</QrCode.Overlay>
			<QrCode.DownloadTrigger fileName="skeleton-dev" mimeType="image/png">
				Download
			</QrCode.DownloadTrigger>
		</QrCode>
	);
}

```

## Frame Colors

Use brand color for the frame and a contrasting fill for the QR pattern.

```tsx
import { QrCode } from '@skeletonlabs/skeleton-react';

export default function FrameColors() {
	return (
		<QrCode value="https://skeleton.dev">
			<QrCode.Frame className="size-full max-size-36 bg-brand-contrast-dark">
				<QrCode.Pattern className="fill-brand-dark" />
			</QrCode.Frame>
			<QrCode.Overlay />
		</QrCode>
	);
}

```

## Overlay

Demonstrates an overlay with an icon and a contrasting square background to separate it visually from the pattern.

```tsx
import { QrCode } from '@skeletonlabs/skeleton-react';
import favicon from '@/assets/favicon.png';

export default function OverlayDemo() {
	return (
		<QrCode value="https://skeleton.dev">
			<QrCode.Frame className="size-full max-size-36">
				<QrCode.Pattern />
			</QrCode.Frame>
			<QrCode.Overlay>
				<img src={favicon.src} alt="Skeleton Logo" className="size-12" />
			</QrCode.Overlay>
		</QrCode>
	);
}

```

## Clickable download

Wrap the visual frame/pattern in the download trigger so clicking the code initiates a download.

```tsx
import { QrCode } from '@skeletonlabs/skeleton-react';

export default function ClickableDownload() {
	return (
		<QrCode value="https://skeleton.dev">
			<QrCode.DownloadTrigger fileName="skeleton-dev" mimeType="image/png">
				<QrCode.Frame className="size-full max-size-36">
					<QrCode.Pattern />
				</QrCode.Frame>
			</QrCode.DownloadTrigger>
			<QrCode.Overlay />
		</QrCode>
	);
}

```

## Anatomy

Here's an overview of how the QrCode component is structured in code:

```tsx
import { QrCode } from '@skeletonlabs/skeleton-react';

export default function Anatomy() {
	return (
		<QrCode value="https://skeleton.dev">
			<QrCode.Frame>
				<QrCode.Pattern />
			</QrCode.Frame>
			<QrCode.Overlay />
			<QrCode.DownloadTrigger />
		</QrCode>
	);
}
```

## API Reference

### Root

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Provider

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| value   | -                           | Api\<PropTypes>                                                | -       |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |

### Context

| Prop     | Description | Type                                   | Default |
| -------- | ----------- | -------------------------------------- | ------- |
| children | -           | (qrCode: Api\<PropTypes>) => ReactNode | -       |

### DownloadTrigger

| Prop    | Description                 | Type                                                              | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | -       |

### Frame

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"svg">) => Element) \| undefined | -       |

### Pattern

| Prop    | Description                 | Type                                                            | Default |
| ------- | --------------------------- | --------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"path">) => Element) \| undefined | -       |

### Overlay

| Prop    | Description                 | Type                                                           | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | -       |