QR Code Generator

QrCodeGenerator.jsx builds one payload string with buildQrValue, then asks the qrcode package for a PNG data URL (QRCode.toDataURL) shown in QR preview, and optionally an SVG string (QRCode.toString). Creating that image does not verify that the encoded destination is safe, reachable, correct, scannable on every device, connected to Wi-Fi, or accepted by an email, SMS, or phone application.

Default form is DEFAULTS: type url, empty fields, size 512, margin 2, colors #000000 / #ffffff, errorCorrection M, wifiEncryption WPA, wifiHidden false. There is no file import of an existing QR.

URL (default)

text.trim(). No scheme is prepended. type="url" on the input is HTML only.

Text

The textarea value as typed (buildQrValue does not trim). canGenerate still requires qrValue.trim().

Email

mailto:{email.trim()} plus optional ?subject=&body= from URLSearchParams when those fields trim non-empty. Requires email.trim().

Phone

tel:{phone.trim()}. Requires phone.trim(). No extra digit validation.

WiFi

WIFI:T:{WPA|WEP|nopass};S:{escaped SSID};P:{escaped password};H:true|false;; Requires wifiSsid.trim(). Password may be empty.

Wi-Fi escaping is wifiSsid/wifiPassword.replace(/([\\;,:"])/g, "\\$1") before interpolation. The encryption select labels WPA as “WPA / WPA2” but the payload value is WPA, WEP, or nopass. There is no SMS constructor in this switch.

SIZE_OPTIONS are 256, 512, and 1024, passed as width. Margin is a range 0–8 (step 1). ERROR_CORRECTION_OPTIONS are L/M/Q/H labeled Low/Medium/Quartile/High, passed as errorCorrectionLevel. Those letters are what this file sends to qrcode; the page does not document library capacity tables.

sanitizeHexColor accepts # plus 3 hex digits, # plus 6 hex digits, or 6 hex digits with a # prepended; otherwise it returns the black or white fallback. The color picker binds to the sanitized value; the text field binds to form.darkColor / form.lightColor.

1. Idle: URL pressed, Destination URL empty (placeholder https://example.com), QR preview “Waiting for input” / “Your QR code preview will appear here.” Download PNG, Download SVG, and Copy image are disabled. Content helper: “Enter content to generate a QR code.”
2. Click URL, Text, Email, Phone, or WiFi (aria-label Content type). There is no SMS type.
3. URL: Destination URL. Amber tip if the trimmed string lacks http:// or https:// (generation still runs; the page does not fetch).
4. Text: Text content textarea (placeholder “Enter text to encode in the QR code.”).
5. Email: Email address required (placeholder name@example.com); Subject (optional) and Message (optional).
6. Phone: Phone number required (placeholder +1 555 0100). No extra digit validation.
7. WiFi: Wi-Fi name (SSID) required (placeholder MyWiFi); Password optional; Encryption WPA / WPA2 (default), WEP, or No password; Hidden network checkbox.
8. When canGenerate is true, useEffect runs generateQr. Generate QR code only increments generateTick. Customize Size 256px / 512px / 1024px, Error correction Low / Medium / Quartile / High, Foreground color, Background color, and Margin (0–8).
9. QR preview img alt is “Generated QR code preview”. Click Download PNG (qr-code.png), Download SVG (qr-code.svg), Copy image (Copied for 1.5 seconds when clipboard.write and ClipboardItem exist), or Reset. The dashed Customize note says “Logo embedding will be available in a future update.” There is no Load example or scanner test.

Preview is an img whose src is the toDataURL result (alt “Generated QR code preview”). Download PNG uses downloadDataUrl(qrDataUrl, "qr-code.png"). Download SVG generates a new SVG with the same payload and options (including width) and downloadTextFile(..., "qr-code.svg", "image/svg+xml"). Copy image fetch()es the data URL, wraps a PNG ClipboardItem, and is omitted from the DOM when canCopyImage is false.

Reset sets DEFAULTS and clears qrDataUrl, error, warning, hasGenerated, and copiedImage. There is no Load example control.

LONG_CONTENT_WARNING is 1000: if qrValue.length exceeds that, an amber message says content is getting long and very large QR codes may be harder to scan or exceed capacity at high error correction. That is not a hard cutoff. If toDataURL throws and length is still over 1000, the red error tells you to try shorter text or lower error correction; otherwise “Failed to generate QR code. Please check your input and colors.”

The page never runs a camera or third-party scanner. Contrast, print size, and reader apps are outside this file. Error-correction letters are library options, not a promise that a damaged print will still scan.

URL mode does not HEAD/GET the destination. Email mode does not send mail. Phone mode does not dial. Wi-Fi mode does not join a network. The ToolTipsCard safety note says QR codes can hide links and to scan only codes from sources you trust — that is on-page copy, not a URL reputation check.

• That a scanner, phone, or OS will open mailto:, tel:, or WIFI: the way you expect.
• That an email address, phone number, or URL is well-formed beyond trim/non-empty (and the URL prefix tip).
• SMS, vCard, geo, or logo-in-the-center encoding.
• Universal ISO/IEC QR compliance as a product certification — this file calls qrcode with the options above.
• Tracking, analytics of scans, or a public QR hosting URL.

Generation runs in the tab via the qrcode import. QrCodeGenerator.jsx does not call trackToolEvent and does not POST the payload to a QR API. Footer copy says QR codes are generated locally. Wi-Fi password remains in React state until Reset or a refresh. Clipboard and downloads stay in the browser. Site assets, ads, and extensions remain outside this helper.

• Read the encoded type: trimmed URL vs raw text vs mailto: vs tel: vs WIFI:.
• If the URL warning is showing, decide whether you meant a web URL or plain text.
• For Wi-Fi, confirm T/S/P/H match the actual network (WPA payload value vs the “WPA / WPA2” label).
• If payload length is over 1000, treat the amber text as a scan-capacity hint, not a pass.
• Download PNG or SVG and test with the scanner you will actually use — this preview is not that test.
• Do not treat the image as proof the destination is safe or reachable.

• URL Encoder/Decoder — when you need encodeURIComponent / encodeURI. This page stores the typed URL or query pieces as the QR string; it does not percent-encode the URL field.
• Color Converter — when you need RGB or HSL conversion. Foreground/background here only pass sanitizeHexColor into qrcode.