Dialog QR Code
The Dialog QR Code component is used to display a dialog box that contains a QR code. It can be used to provide users with a convenient way to scan QR codes and access relevant information or perform specific actions.
Usage
import { DialogQr } from "@momo-webplatform/mobase";export function DialogQrDemo() {
const [openDialogQr, setOpenDialogQr] = React.useState(false);
return (
<div className="flex justify-center items-center">
<Button variant="primary" onClick={() => setOpenDialogQr(true)}>Quét mã ngay</Button>
<DialogQr
open={openDialogQr}
onOpenChange={() => setOpenDialogQr(false)}
title="Quét mã để tải ứng dụng hoặc Nhập mã ngay"
shortTitle="Nhập mã ngay"
qrLink="https://www.momoapp.page.link/7hKC1a7Nu4v47jVA6"
/>
</div>
);
}NOTE: Because DialogQr uses Dialog component, please install the Dialog component before using the DialogQr component.
Examples
Dialog QR default
Dialog QR All-in-one
Use prop isQrForAll to convert Dialog QR to UI All-in-one QR payment across any app.
Dialog QR with custom content steps
Use children to add custom content steps to the Dialog QR.
API Reference
DialogQr
| Prop | Type | Default | Required |
title | string | -- | false |
shortTitle | string | -- | false |
qrImage | string | -- | false |
qrLink | string | -- | false |
logoQr | string | -- | false |
isQrForAll | enumboolean | false | false |
className | string | -- | false |
open | enumboolean | -- | false |
defaultOpen | enumboolean | -- | false |
onOpenChange | (open: boolean) => void | -- | false |
modal | enumboolean | -- | false |
DialogQrProps
| Prop | Type | Default | Required |