QR Code
GeneralTạ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
Sizes — sm / md / lg / xl
sm — 96px
md — 128px
lg — 192px
xl — 256px
Error Correction Level
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
Custom Colors
Brand Purple
Success Green
Dark Theme
Inverted
With Logo (imageSettings)
Dùng level H để đảm bảo QR vẫn đọc được khi có ảnh che giữa.
GitHub — level H + logo
Renderer & Download
SVG renderer
Tải xuống định dạng .svg
Canvas renderer
Tải xuống định dạng .png
Label & Description
Basuicn Design System
Quét để truy cập trang web chính thức
Custom Pixel Size
pixelSize={180}
API Reference
| 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 |