QR share

QR share

Llevar el pulso al aula. QR grande, link copiable, opción de imprimir.

Compartí el pulso con un código grande, una URL y acciones de copiar e imprimir. Sirve para aulas y equipos de trabajo. El código llega por el slot qr: QrShare no lo genera ni valida que sea escaneable. En la app aparece en el estado vacío de Inicio (inicio-empty.tsx) con react-qr-code y printHref a la hoja imprimible.

Instalación

shadcn

npx shadcn@latest add https://design.moodinary.com/r/qr-share.json

import

import { QrShare } from "@moodinary/ui/components/qr-share";

Ejemplos

El ícono es un placeholder identificado como QR de ejemplo, no escaneable. Copiar link escribe la URL de ejemplo en el portapapeles e Imprimir abre el diálogo del navegador.

Pulso de 4.º Apulses.moodinary.com/ejemplo-4a

Imprimir

QR de ejemplo, no escaneable.

Código

share.tsx

import { QrCodeIcon } from "@moodinary/ui/components/icons";
import { QrShare } from "@moodinary/ui/components/qr-share";

/* Como en inicio-empty.tsx: printHref abre la hoja imprimible del QR en otra pestaña. */
export default function QrShareExample() {
	return (
		<QrShare
			className="w-full max-w-[420px]"
			extra={
				<span className="text-[12px] text-ink-3">
					QR de ejemplo, no escaneable.
				</span>
			}
			printHref="#qr-print"
			qr={
				<QrCodeIcon
					aria-label="QR de ejemplo, no escaneable"
					className="text-ink"
					role="img"
				/>
			}
			title="Pulso de 4.º A"
			url="https://pulses.moodinary.com/ejemplo-4a"
		/>
	);
}

Contexto de impresión

Un equipo de empresa con una aclaración debajo de las acciones. En una implementación real, pasá un QR generado desde la misma URL.

Pulso de Atención al clientepulses.moodinary.com/ejemplo-soporte

Imprimir

QR de ejemplo, no escaneable. En la app se genera el código real del pulso.

Código

print-link.tsx

import { QrCodeIcon } from "@moodinary/ui/components/icons";
import { QrShare } from "@moodinary/ui/components/qr-share";

/* Como en inicio-empty.tsx: printHref abre la hoja imprimible del QR en otra pestaña. */
export default function QrSharePrintLink() {
	return (
		<QrShare
			className="w-full max-w-[420px]"
			extra={
				<span className="text-[12px] text-ink-3">
					QR de ejemplo, no escaneable. En la app se genera el código real del
					pulso.
				</span>
			}
			printHref="#qr-print"
			qr={
				<QrCodeIcon
					aria-label="QR de ejemplo, no escaneable"
					className="text-ink"
					role="img"
				/>
			}
			title="Pulso de Atención al cliente"
			url="https://pulses.moodinary.com/ejemplo-soporte"
		/>
	);
}

Props

QrShare

Prop	Tipo	Default	Descripción
title	ReactNode	-	Nombre obligatorio del pulso o equipo.
url	string	-	URL completa, se copia sin cambios; la vista omite el protocolo.
qr	ReactNode	-	Código generado afuera del componente, obligatorio.
onPrint	() => void	-	Acción de imprimir cuando no se pasa printHref.
printHref	string	-	Si existe, Imprimir es un enlace que abre otra pestaña y tiene prioridad sobre onPrint.
extra	ReactNode	-	Contexto adicional debajo de las acciones.
className	string	-	Clases del contenedor div.

Cuándo sí y cuándo no

Hacé

Generá el QR desde la URL que copiás.
Probá el escaneo y la impresión antes de repartirlo.
Dejá el link disponible aunque no se pueda escanear.

Evitá

No presentes un ícono o patrón decorativo como QR funcional.
No muestres un botón Imprimir sin onPrint o printHref.
No dependas del portapapeles como única forma de compartir.

Dale al QR un nombre accesible que identifique el pulso.
Copiar e Imprimir se recorren con Tab y se activan con su teclado nativo.
El portapapeles requiere un contexto seguro y permisos del navegador. El texto Copiado confirma el éxito, pero no tiene una región viva propia.