QR Code Generator

QR Codes sind praktisch um Inhalte wie URLs oder anderes schnell zu teilen.

import Generator from '@tdev-components/shared/QR-Code/Generator';

<Generator text="Hello World" />

http://localhost:3000

Inhalt anzeigen

<Generator showText text="Hello World" />

http://localhost:3000

Hello World

Mit Texteingabe

<Generator withInput size="20em" text="Hello World" />

http://localhost:3000

Hello World

Mit Icon

Es können auch MdiIcons im QR Code eingebettet werden.

Grösse und Farbe

Da das Icon als SVG eingebettet wird, kann muss die Grösse als Zahl (in Pixel) und die Farbe als HTML-Farbe angegeben werden. CSS-Variablen oder Grössen funktionieren nicht.

<Generator icon={mdiEarth} text="Hello World" />
<Generator icon={mdiEarth} iconSize="48" iconColor='#01f0bc' text="Hello World in Cyan" />

http://localhost:3000

Optionen

text

Der Text, der im QR Code codiert wird.

string

showText

Zeigt den Text unter dem QR Code an.

boolean

Standard: false

isLink

Der Text wird als Link interpretiert und als <Link>-Tag dargestellt.

withInput

Zeigt ein Input Feld um den Text zu ändern.

boolean

Standard: false

size

Die Grösse des QR Codes.

string - CSS Grösse, z.B. 20em

Standard: 15em (im css gesetzt)

className

Eine CSS Klasse für den umgebenden div-Container.

string

icon

Ein MdiIcon (oder ein SVG-Path), das im QR Code eingebettet wird.

string

iconSize

Die Grösse des Icons.

number - eine Zahl in Pixel (kann nicht als CSS-Grösse angegeben werden!)

Standard: 32

iconColor

Die Farbe des Icons.

string - eine HTML-Farbe (kann nicht als CSS-Variable angegeben werden!)

Standard: #306cce

qrProps

Weitere Props für das QRCode-Element.

👉 QRCode.React

Installation

Code

• src/components/shared/QR-Code/Generator

npm

yarn add qrcode.react