Scan to see every date of the autumn tour, or send the link.
A share card built around the qr-code component: the link as a QR on a white plate that every phone camera reads in either theme, a title and a line of text, the URL in a read-only field that selects itself on focus, and a copy button whose icon turns into a check and is announced to screen readers. Where the browser has a share sheet a Share button opens it, and Download QR saves the code as a PNG with the same module and finder style. Every QR setting passes through the qr prop.
The import and the props worth knowing about, in one place.
import { CodeShare } from "@/components/beste/component/code-share";
<CodeShare
url="https://beste.co/tours/nils-frahm-autumn"
title="Share the tour"
description="Scan to see every date, or send the link."
qr={{ moduleStyle: "dots", finderStyle: "circle", ecc: "Q" }}
fileName="autumn-tour"
onCopy={(url) => console.log("Copied", url)}
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Tab to the link | Selects the whole address, ready to copy by hand. |
|---|---|
| Enter on copy | Copies the link; the icon turns into a check and it is announced. |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
url* | string | — | The link to share. It is encoded in the QR and shown in the field. |
title | string | — | |
description | string | — | |
qr | Omit<QrCodeProps, "value" | "className" | "tone" | "title"> | — | How the QR is drawn: module and finder style, colors, error correction, logo, quiet zone. |
showShare | boolean | — | Shows the native share button where the browser has one. @defaultValue true |
showDownload | boolean | — | Shows the download button. @defaultValue true |
fileName | string | — | Name of the downloaded PNG, without the extension. @defaultValue "qr-code" |
onCopy | (url: string) => void | — | |
labels | Partial<typeof DEFAULT_LABELS> | — | Words used by the component, for translation. |
tone | "muted" | "outline" | "ghost" | "outline" | |
size | "sm" | "default" | "lg" | "default" | |
className | string | — |