Components advanced

QRCode

Generates a QR code from supplied content such as URLs, text, or vCard data. Ideal for shareable links, tickets, payments, and contact information.

Mis à jour Mar 6, 2026

QRCode

Generates a QR code from supplied content such as URLs, text, or vCard data. Ideal for shareable links, tickets, payments, and contact information.

Use Cases

  • Event tickets with scannable entry codes
  • Product detail pages with shareable QR
  • Payment links (crypto, payment apps)
  • vCard contact sharing
  • App download links

Properties

content

Content to encode (URL, text, vCard, etc.) Type: string.

size

QR code size in pixels (square) Type: number. Default: 200

errorCorrection

Error correction level (L=7%, M=15%, Q=25%, H=30% recovery) Type: string. Options: L, M, Q, H. Default: M

backgroundColor

Background color (hex) Type: string. Default: #ffffff

foregroundColor

QR code color (hex) Type: string. Default: #000000

dataBinding

Data binding to dynamically generate QR from data source field Type: object.

Best Practices

  • Keep content concise - shorter URLs/text produce cleaner QR codes
  • Use size 150-250px for most displays
  • Higher error correction (H) for printed materials, lower (L) for screens
  • Test QR codes with multiple scanner apps before deploying

Étiquettes

qrcode advanced event tickets product detail payment links

Composants associés

QRCode

Prêt à construire ?

Commencez à créer votre application gratuitement avec Qödiak.

Commencer gratuitement

Articles associés

AnimatedGradient

Smooth animated gradient background for modern, premium aesthetics. Supports linear and radial gradients with configurable colors, animation speed, and intensity. GPU‑accelerated for smooth 60fps performance.

Button

Interactive button component that supports link navigation, page data source operations (record navigation, new record, mode switching), form submission, and custom JavaScript execution. Save/Delete actions must use a custom‑script with navigation. Two visual variants are available, and the button can be enabled or disabled dynamically based on data context.

Calendar

A full‑featured calendar component built with react‑big‑calendar. It can display events in month, week, day, or agenda views and includes navigation and view‑switching capabilities, making it suitable for any site that needs scheduling, event management, or date visualization.

Card

Feature card component with an icon, title, description, and entrance animations. Ideal for showcasing features, services, or benefits in grid layouts with animation support.

Checkbox

A checkbox group component that lets users select multiple options from a predefined list. It renders a set of checkboxes with individual labels and can be arranged vertically or horizontally.

CountdownTimer

Real-time countdown timer component that displays the time remaining until a target date/time. It updates every second, offers customizable formatting, and shows a completion message when the countdown ends. Suitable for any site type.