StyledQrCode

Data Display

문자열을 담아 그려 주는 QR 코드.

Usage

링크나 식별 값을 브랜드 스타일의 QR 코드로 표시·캡처할 때 사용한다.

import

import { StyledQrCode } from '@mildang/design-system/QrCode';

API Reference

StyledQrCode Props

Prop

Type

Default

data

필수

string

지정 안 함

margin

number

size

number

128

type

"canvas" | "svg"

canvas

variant

"rounded" | "square"

rounded

QR 코드 구성

data에 URL이나 텍스트를 넣고 size, margin, type, variant로 출력 크기와 렌더링 방식을 정한다. 다운로드가 필요하면 ref의 download 메서드를 사용한다.

기본 사용

URL을 스캔 가능한 SVG QR 코드로 표시한다.

코드

Open in Playground

import { StyledQrCode } from '@mildang/design-system/QrCode';

export default function StyledQrCodeExample() {
  return (
    <>
      <StyledQrCode data="https://mildang.com" size={160} type="svg" variant="rounded" />
      <StyledQrCode data="https://mildang.com" size={160} type="svg" variant="square" />
    </>
  );
}