Qr Code · Skeleton

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>
	);
}

svelte

<script lang="ts">
	import favicon from '@/assets/favicon.png';
	import { QrCode } from '@skeletonlabs/skeleton-svelte';
</script>

<QrCode value="https://skeleton.dev">
	<QrCode.Frame class="size-full max-size-36">
		<QrCode.Pattern />
	</QrCode.Frame>
	<QrCode.Overlay>
		<img src={favicon.src} alt="Skeleton Logo" class="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>
	);
}

svelte

<script lang="ts">
	import { QrCode } from '@skeletonlabs/skeleton-svelte';
</script>

<QrCode value="https://skeleton.dev">
	<QrCode.Frame class="size-full max-size-36 bg-brand-contrast-dark">
		<QrCode.Pattern class="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>
	);
}

svelte

<script lang="ts">
	import favicon from '@/assets/favicon.png';
	import { QrCode } from '@skeletonlabs/skeleton-svelte';
</script>

<QrCode value="https://skeleton.dev">
	<QrCode.Frame class="size-full max-size-36">
		<QrCode.Pattern />
	</QrCode.Frame>
	<QrCode.Overlay>
		<img src={favicon.src} alt="Skeleton Logo" class="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>
	);
}

svelte

<script lang="ts">
	import { QrCode } from '@skeletonlabs/skeleton-svelte';
</script>

<QrCode value="https://skeleton.dev">
	<QrCode.DownloadTrigger fileName="skeleton-dev" mimeType="image/png">
		<QrCode.Frame class="size-full max-size-36">
			<QrCode.Pattern />
		</QrCode.Frame>
	</QrCode.DownloadTrigger>
</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>
	);
}

svelte

<script lang="ts">
	import { QrCode } from '@skeletonlabs/skeleton-svelte';
</script>

<QrCode value="https://skeleton.dev">
	<QrCode.Frame>
		<QrCode.Pattern />
	</QrCode.Frame>
	<QrCode.Overlay />
	<QrCode.DownloadTrigger />
</QrCode>

API Reference

Root

Prop	Default	Type
`value`	—	string \| undefined The controlled value to encode.
`defaultValue`	—	string \| undefined The initial value to encode when rendered. Use when you don't need to control the value of the qr code.
`ids`	—	Partial<{ root: string; frame: string; }> \| undefined The element ids.
`encoding`	—	QrCodeGenerateOptions \| undefined The qr code encoding options.
`onValueChange`	—	((details: ValueChangeDetails) => void) \| undefined Callback fired when the value changes.
`pixelSize`	—	number \| undefined The pixel size of the qr code.
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	—	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Provider

Prop	Default	Type
`value`	—	QrCodeApi<PropTypes>
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	(qrCode: QrCodeApi<PropTypes>) => ReactNode

DownloadTrigger

Prop	Default	Type
`mimeType`	—	DataUrlType The mime type of the image.
`quality`	—	number \| undefined The quality of the image.
`fileName`	—	string The name of the file.
`element`	—	((attributes: HTMLAttributes<"button">) => Element) \| undefined Render the element yourself

Frame

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

Pattern

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

Overlay

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

Root

Prop	Default	Type
`value`	—	string \| undefined The controlled value to encode.
`defaultValue`	—	string \| undefined The initial value to encode when rendered. Use when you don't need to control the value of the qr code.
`ids`	—	Partial<{ root: string; frame: string; }> \| undefined The element ids.
`encoding`	—	QrCodeGenerateOptions \| undefined The qr code encoding options.
`onValueChange`	—	((details: ValueChangeDetails) => void) \| undefined Callback fired when the value changes.
`pixelSize`	—	number \| undefined The pixel size of the qr code.
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	—	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Provider

Prop	Default	Type
`value`	—	() => QrCodeApi<PropTypes>
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	Snippet<[() => QrCodeApi<PropTypes>]>

DownloadTrigger

Prop	Default	Type
`mimeType`	—	DataUrlType The mime type of the image.
`quality`	—	number \| undefined The quality of the image.
`fileName`	—	string The name of the file.
`element`	—	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself

Frame

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"svg">]> \| undefined Render the element yourself

Pattern

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"path">]> \| undefined Render the element yourself

Overlay

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself