• 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
    • ListBox
    • 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

Encoding and Error Correction

The KendoReact QR Code supports different encodings and error correction levels.

Value Encoding

By default, the QR Code value is encoded by using "ISO_8859_1", which supports all characters from the ISO/IEC 8859-1 character set. To enable support for all Unicode characters, set the encoding to "UTF_8".

The UTF-8 encoding is not included in the specifications and is not supported by all readers.

The following example shows how to set the encoding:

Example
View Source
Change Theme:

Error Correction Level

QR Codes provide error correction and recovery that allow partially damaged or covered QR codes to remain readable. Each successive error correction level improves the chances of the reader to recover the original information:

  • "L"—7% of the data can be restored.
  • "M"—15% of the data can be restored.
  • "Q"—25% of the data can be restored.
  • "H"—30% of the data can be restored.

If you expect part of the code to be covered, for example, when using overlays, use a higher error correction level. The QR Code size may need to be increased to accommodate the additional information.

To set the error correction level, use the errorCorrection prop:

Example
View Source
Change Theme:

In this article

Not finding the help you need?