Components advanced

QRCode

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

Updated Feb 19, 2026

QRCode

Generates a QR code from provided content such as URLs, text, or vCard data. Suitable 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. Required.

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

Tags

qrcode advanced event tickets product detail payment links

Related Components

QRCode

Ready to build?

Start creating your app for free with Qödiak.

Get Started Free

Related Articles

AnimatedCounter

An animated number counter that smoothly counts from a start value to an end value when scrolled into view, ideal for showcasing statistics, metrics, and numbers on any site.

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.

AppSettings

App-level configuration that applies to the entire application. It controls app metadata, publishing, authentication, email notifications, SEO, webhooks, and branding. These settings are distinct from page-level and component-level properties.

Badge

A small label or tag component used for status indicators, categories, highlights, and similar purposes. It supports multiple visual variants.

Button

An 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. The component offers two visual variants and can enable or disable 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.