QRCode

SVG QR code, dark on white in both themes, with an optional centre icon and loading / expired states.

import { QRCode } from '@lobehub/ui/base-ui';

NPM Source Edit

Data Display

Basic

Loading preview

APIs

QRCode properties

bgColor: string
Defaults to "#fff".
bordered: boolean
Defaults to true.
color: string
Defaults to "#000".
errorLevel: 'L' | 'M' | 'Q' | 'H'
Defaults to "M".
icon: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
onRefresh: () => void
ref: null | (instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES] | RefObject<HTMLDivElement | null>
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
size: number
Defaults to 160.
status: 'active' | 'loading' | 'expired'
Defaults to "active".
valueRequired: string

Also accepts all native HTML and ARIA attributes.

The code stays dark on white in dark mode so phones can scan it; color and bgColor override that. Setting icon raises the error correction level to H and clears the modules under the icon. status="expired" shows a Refresh button when onRefresh is set.

Migrating from antd QRCode

Drop color="#000", bgColor="#fff" and bordered={false} where they only restated the old workaround; keep bordered={false} if you want no outline.
type="canvas" is not supported; output is always SVG.