QR Code

General

Tạo mã QR từ URL, text, hay bất kỳ chuỗi nào. Hỗ trợ SVG & Canvas, tuỳ chỉnh màu sắc, logo nhúng, và tải xuống.

Basic Usage

sm — 96px

md — 128px

lg — 192px

xl — 256px

Level cao hơn giúp QR vẫn đọc được khi bị che khuất một phần. Dùng level H khi nhúng logo.

Level L

~7% phục hồi

Level M

~15% phục hồi

Level Q

~25% phục hồi

Level H

~30% phục hồi

Brand Purple

Success Green

Dark Theme

Inverted

Dùng level H để đảm bảo QR vẫn đọc được khi có ảnh che giữa.

GitHub — level H + logo

SVG renderer

Tải xuống định dạng .svg

Canvas renderer

Tải xuống định dạng .png

Basuicn Design System

Quét để truy cập trang web chính thức

pixelSize={180}

Prop	Type	Default	Mô tả
`value`*	`string`	—	Nội dung cần mã hoá (URL, text, ...)
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Preset kích thước: 96 / 128 / 192 / 256px
`pixelSize`	`number`	—	Ghi đè kích thước pixel (ưu tiên hơn size)
`level`	`'L' \| 'M' \| 'Q' \| 'H'`	`'L'`	Mức độ sửa lỗi — L thấp, H cao (dùng H khi có logo)
`bgColor`	`string`	`'#ffffff'`	Màu nền (hex hoặc rgb)
`fgColor`	`string`	`'#000000'`	Màu module QR (hex hoặc rgb)
`marginSize`	`number`	`2`	Số module khoảng trắng xung quanh QR
`imageSettings`	`QRCodeImageSettings`	—	Logo/ảnh nhúng vào giữa — khuyên dùng kèm level H
`renderer`	`'svg' \| 'canvas'`	`'svg'`	SVG: sắc nét mọi kích thước; Canvas: download PNG
`title`	`string`	—	Tiêu đề accessibility cho screen reader
`label`	`string`	—	Nhãn hiển thị phía trên QR code
`description`	`string`	—	Chú thích hiển thị phía dưới QR code
`downloadable`	`boolean`	`false`	Hiển thị nút tải xuống (SVG hoặc PNG)
`downloadFilename`	`string`	`'qrcode'`	Tên file khi tải (không có đuôi mở rộng)
`className`	`string`	—	Class tuỳ chỉnh cho container ngoài cùng