@ark-ui/react/qr-code + Tailwind CSS v4WAI-ARIA Compliant

Ark QR Code Component

Thành phần sinh mã QR tương tác cao xây dựng từ thư viện lõi @ark-ui/react/qr-code. Hỗ trợ đầy đủ SVG đồng bộ SSR, kiểm soát lỗi (ECC), đặt logo trung tâm, điều khiển trạng thái ngoài, xuất ảnh PNG/SVG và các biến thể giao diện.

Cơ bản (Basic Compound API)

Sử dụng các thành phần ghép nối Root, Frame và Pattern chuẩn Ark UI.

Quét thử với camera điện thoại

Logo Overlay (Huy hiệu trung tâm)

Chèn huy hiệu hoặc logo thương hiệu với mức sửa lỗi cao (ECC H).

CMS

ECC mức H (30%) giữ mã luôn quét được

Tương tác Controlled State

Cập nhật giá trị mã QR theo thời gian thực từ form nhập liệu.

Nội dung mã QR (URL hoặc văn bản)

Mức sửa lỗi (Error Correction)

Bốn mức sửa lỗi L, M, Q, H phù hợp từ quét nhanh đến in ấn phức tạp.

Đổi màu sắc & Giao diện

Pattern kế thừa màu currentColor nên dễ dàng đổi màu qua class Tailwind.

Mặc định

Primary

Violet

Emerald

Rose

Kích thước & Biến thể khung

Hỗ trợ các kích thước từ xs đến xl cùng 4 biến thể giao diện tinh tế.

Size:

Variant:

Shorthand API tiện lợi

Khai báo gọn gàng chỉ với một thẻ component mà không cần ghép nối thủ công.

Gọi ngắn gọn chỉ với 1 thẻ <ArkQrCode /> duy nhất

RootProvider & Hook useQrCode

Quản lý dữ liệu và hành vi mã QR bên ngoài component tree.

mailto:support@chillcms.comHook useQrCode cho phép điều khiển API ngoài cây giao diện

Tải ảnh QR (Download Trigger)

Xuất mã QR trực tiếp ra ảnh PNG hoặc file vector SVG sắc nét.

Cung cấp trigger tải xuống tự động không cần code canvas thủ công

Cấu trúc thành phần (Anatomy & Parts)

Các subcomponent được chuẩn hóa theo giải phẫu của @ark-ui/react/qr-code:

Thành phần	Phần tử DOM	Mô tả
ArkQrCode.Root	div	Khung bao ngoài cùng quản lý context và thuộc tính vị trí.
ArkQrCode.Frame	svg	Khung SVG chứa mã QR với viewBox tự động tính toán.
ArkQrCode.Pattern	path	Đường dẫn vẽ ma trận điểm QR, kế thừa màu chữ currentColor.
ArkQrCode.Overlay	div	Vùng chứa logo hoặc biểu tượng đặt căn giữa mã QR.
ArkQrCode.DownloadTrigger	button	Nút kích hoạt tải xuống ảnh QR theo định dạng và tên file.
ArkQrCode.RootProvider	div	Provider truyền đối tượng quản lý từ hook `useQrCode`.

Notifications