Wi-Fi QR Code

A QR code that joins a Wi-Fi network when scanned, with a typed, escaped payload builder.

qrdx library API reference wifi-qr-code.json

Cafe GuestScan with your camera to join

Installation

pnpm dlx shadcn@latest add https://qrdx.dev/r/wifi-qr-code.json

Usage

import { WifiQrCode } from "@/components/wifi-qr-code";

<WifiQrCode ssid="Cafe Guest" password="espresso-2024" />

The iOS and Android cameras offer to join the network when they scan the code. No app is needed.

Examples

Variants

showPassword prints the password for guests who type it in. Use encryption="nopass" for open networks and hidden for networks that don't broadcast their name.

Cafe GuestPassword: espresso-2024

Library Free WiFiScan with your camera to join

OfficeScan with your camera to join

buildWifiPayload returns the WIFI: text the code encodes. It escapes \, ;, ,, : and " in names and passwords, which is where hand-written payloads usually break. Use it with any QR renderer, or to print the payload for debugging.

WIFI:T:WPA;S:Office\; 2nd floor;P:pa\:ss\"word;;

API Reference

Prop

Type

Any other prop, such as className, is passed to the wrapping <figure>.

buildWifiPayload

buildWifiPayload(network: WifiNetwork): string takes the same network fields as the component: ssid, password, encryption and hidden.