QRCode

Components that can convert text into QR codes, and support custom color and logo.

When to use

Used when the text needs to be converted into a QR Code.

Basic Usage.

The status can be controlled by the value status, four values of active, expired, loading, scanned are provided.

Customize the rendering results by type, provide options canvas and svg.

Custom Color.

set Error Level.

You can customize the semantic dom style of QRCode by passing objects/functions through classNames and styles.

QRCode with Icon.

You can control the rendering logic of the QR code in different states through the value of statusRender.

Custom Size.

A way to download QRCode.

With Popover.

QRCode are exported from @ceebee/ui/client.

Property	Description	Type	Default	Version
`value`	scanned text	`string \| string[]`	`-`	string[]: 5.28.0
`type`	render type	`canvas \| svg`	`canvas`	5.6.0
`icon`	include image url (only image link are supported)	`string`	`-`	-
`size`	QRCode size	`number`	`160`	-
`iconSize`	include image size	`number \| { width: number; height: number }`	`40`	5.19.0
`color`	QRCode Color	`string`	`#000`	-
`classNames`	Customize class for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>`	`-`	6.0.0
`bgColor`	QRCode Background Color	`string`	`transparent`	5.5.0
`marginSize`	Quiet zone size (in modules). 0 means no margin	`number`	`0`	6.2.0
`bordered`	Whether has border style	`boolean`	`true`	-
`errorLevel`	Error Code Level	`'L' \| 'M' \| 'Q' \| 'H'`	`M`	-
`boostLevel`	If enabled, the Error Correction Level of the result may be higher than the specified Error Correction Level	`boolean`	`true`	5.28.0
`status`	QRCode status	`active \| expired \| loading \| scanned`	`active`	scanned: 5.13.0
`statusRender`	custom status render	`(info: StatusRenderInfo) => React.ReactNode`	`-`	5.20.0
`styles`	Customize inline style for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>`	`-`	6.0.0