• 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
Components / Barcodes / API / QRCodeProps / 

QRCodeProps

Represents the props of the KendoReact QRCode component.

NameTypeDefaultDescription

background?

string

"white"

The background color of the QR Code. Accepts a valid CSS color string, including hex and rgb.

border?

Border

The border of the QR Code.

className?

string

Sets additional CSS classes to the component.

color?

string

"black"

The color of the QR Code. Accepts a valid CSS color string, including hex and rgb.

encoding?

QRCodeEncoding

"ISO_8859_1"

The encoding mode used to encode the value.

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

The possible values are:

  • "ISO_8859_1"—Supports all characters from the ISO/IEC 8859-1 character set.
  • "UTF_8"—Supports all Unicode characters.

errorCorrection?

QRCodeErrorCorrection

"L"

The error correction level to use.

The possible values are:

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

overlay?

QRCodeOverlay

An optional image overlay that will placed over the QR Code.

Note Always test if the code reads correctly with the applied 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".

padding?

number

0

The padding of the QR Code. A numeric value sets all paddings.

renderAs?

RenderMode

Sets the preferred rendering engine.

The supported values are:

  • "svg"—If available, renders the component as an inline svg element.
  • "canvas"—If available, renders the component as a canvas element.

size?

string | number

"200px"

Specifies the size of a QR Code. Numeric values are treated as pixels.

If no size is specified, the size will be determined from the element width and height. If the element has width or height of zero, a default value of 200 pixels will be used.

style?

React.CSSProperties

The styles that are applied to the component.

value

string | number

The value of the QR Code.

In this article

Not finding the help you need?

Contact Support