• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Overlays

The QR Code supports image overlays and the special Swiss Code overlay.

Image Overlays

Thanks to error correction, information in QR Codes can be recovered even if part of the code is covered or unreadable. This feature allows you to use image overlays to customize the appearance of the QR code.

Always test if the code reads correctly with the desired overlay. Depending on the length of the value and the size of the overlay, you might need to raise the errorCorrection level to "M" or "H".

To add an image overlay, prepare a suitable image and set its dimensions and location by using the overlay setting:

Example
View Source
Change Theme:

Swiss Code

To create a Swiss QR Code, set the overlay prop to the special "swiss" overlay type:

Example
View Source
Change Theme:

In this article

Not finding the help you need?