QrCode

Kurulum

Paket

@bigbang/ui

İçe aktarma

import { QrCode } from '@bigbang/ui';

Kaynak

QrCode.tsx

Storybook

QrCode · Playground

QrCode, @bigbang/ui paketindedir. Kodlama için uqr kullanır; çizim bileşenin kendi SVG’sidir.

import { QrCode } from '@bigbang/ui';

<QrCode
  value={payment.link}
  label="Ödeme bağlantısı QR kodu"
  caption={`Referans: ${payment.reference}`}
/>;

QR_QUIET_ZONE sabiti sessiz bölgenin modül sayısını (4) verir.

Özellikler

valueZorunlu

Açıklama

Hazır içerik, örneğin sunucudan gelen bir ödeme bağlantısı ya da TR Karekod dizgesi. Bileşen onu olduğu gibi kodlar, kendisi oluşturmaz.

Tür

string

size

Açıklama

Sessiz bölge dahil genişlik ve yükseklik, piksel. Daha dar bir kapsayıcıya sığmak için küçülür.

Tür

number

Varsayılan

192

ecc

Açıklama

Hata düzeltme düzeyi: M kodun yaklaşık %15'ini, Q yaklaşık %25'ini kurtarır. logo varsa her zaman Q kullanılır.

Tür

'M' | 'Q'

Varsayılan

'M'

logo

Açıklama

Ortada çizilen küçük bir işaret, örneğin marka logosu. Bazı modülleri örttüğü için kod Q düzeyine geçer. Ekran okuyucudan gizlenir.

Tür

ReactNode

labelZorunlu

Açıklama

Kodun erişilebilir adı, örneğin "Ödeme bağlantısı QR kodu".

Tür

string

caption

Açıklama

Kodun altındaki görünür metin, örneğin ödeme referansı ve karşılaştırılacak alan adı. QR kodunu içeriğe ulaşmanın tek yolu olarak bırakmayın.

Tür

ReactNode

className

Açıklama

Kök öğeye eklenir; yalnızca yerleşim için kullanın.

Tür

string

Veri öznitelikleri

• data-component="qr-code": kök öğede.
• data-ecc: kullanılan hata düzeltme düzeyi, M ya da Q.
• data-part: frame, logo, caption.