WiFi QR Code Generator

Wifi QR Code Generator

Welcome to wifi-qr-code-generator 👋

⭐️ Star us on GitHub — it helps!

wifi-qr-code-generator is an npm module to generate a QR Code to connect to your WiFi. Supports WiFi QR Codes in PNG, SVG, Terminal and UTF output formats. Works in both node server and browser.

🏠 HomePage | ✨ Demo | 📃 Usage | 🤝 Contributing

Install

Using NPM:

$ npm install wifi-qr-code-generator

Using Yarn:

$ yarn add wifi-qr-code-generator

Usage

Basic API — Generating a PNG QR Code

const qrcode = require('wifi-qr-code-generator')
const pr = qrcode.generateWifiQRCode({
  ssid: 'Hello world',
  password: 'testpass',
  encryption: 'WPA',
  hiddenSSID: false,
  outputFormat: { type: 'image/png' }
})
pr.then((data) => console.log(data))

This prints the following output:

data:image/png;base64,iVBORw0KGgoAAA...

You can pass this data URL to an html img tag to generate the following QR code image:

API Explanation

Main API call is generateWifiQRCode which is shown in the example above. This method takes an object of the following format:

export interface Config {
  ssid: string
  password: string
  encryption: 'WPA' | 'WEP' | 'None'
  hiddenSSID: boolean
  outputFormat: OutputFormat
}

export interface OutputFormat {
  type: 'image/png' | 'utf8' | 'svg' | 'terminal'
}

1. ssid: string representation of your wireless SSID (Wifi name). Max length possible for WiFi SSID is 32 characters for most routers. However this library doesn't impose any limitation on the length of SSID that can be passed in.
2. password: string representation of your WiFi password
3. encryption: Possible values here are WPA, WEP and None. If you are using WPA2, enter WPA. Please note that WEP protocol has multiple security vulnerabilities and you shouldn't be configuring your WiFi router to use WEP at all.
4. hiddenSSID: should be true if your router is configured to NOT broadcast your SSID. Else false
5. outputFormat: An object that has a single type field

Possible values of type are:

1. "image/png": generateWifiQRCode will generates a data URL representing a PNG image
2. "svg": generateWifiQRCode will generates an SVG image in string format
3. utf8: generateWifiQRCode will generates a UTF8 representation of the QR code
4. terminal: generateWifiQRCode will generates a string that can be pretty printed as QR code in the terminal

Generating a SVG QR Code

const qrcode = require('wifi-qr-code-generator')
const pr = qrcode.generateWifiQRCode({
  ssid: 'Hello world',
  password: 'testpass',
  encryption: 'WPA',
  hiddenSSID: false,
  outputFormat: { type: 'svg' }
})
pr.then((data) => console.log(data))

This prints the following output:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41" shape-rendering="crispEdges">...

You can use the generated SVG directly in your HTML page to display the QR code.

Generating a UTF8 QR Code

const qrcode = require('wifi-qr-code-generator')
const pr = qrcode.generateWifiQRCode({
  ssid: 'Hello world',
  password: 'testpass',
  encryption: 'WPA',
  hiddenSSID: false,
  outputFormat: { type: 'utf8' }
})
pr.then((data) => console.log(data))

This prints the following output:

    █▀▀▀▀▀█ █▀█ █ ▀▄█▄ ▄█▄▄▄▀ █▀▀▀▀▀█
    █ ███ █ ▀▄▄▄▀  █ ▀▀▄  ▀██ █ ███ █
    █ ▀▀▀ █ ▀█ ▀  █▀ ▀█ ██ ██ █ ▀▀▀ █
    ▀▀▀▀▀▀▀ ▀▄█▄▀▄█ ▀▄█▄█▄█ █ ▀▀▀▀▀▀▀
    █  █▀█▀██▀▄ ▀▀ ▀▄▀▀██ ▀▄▄█  █▄██▀
    ▀▄█▀▀ ▀█▄ ▄██ █ ██▀ ▄▀ ███ ▀█ █
    ▄ ▄█▄▀▀█▄ █▀██▀ ██▀▄▀██▀██▀ ▀█▄█▀
     ██▄▀▀▀▀▀▄▄▀▄▀ ▄▀▄▀▄ ▀▀▀ ▀ ▀  ▄█
    ▄ █▄▀▄▀ ▄▄ ▄ ██▄█ ▀▀ ▄ ▄▄▄▄ ▄▄ ▄▄
    ▀█▀█▄█▀ ▄█▄▀ █▄  ▄▄██▄ ▄ ▀ ▀▄▄ ▀▀
    ▄ ▀ ▀ ▀▄▄▄▄  ▀█ ▄▄▄ █▀▄ ▄▀▀▀ ▀ █▄
    █ ▀███▀ ▄███▄█▀▀█▄█   █▄█▀█▄ ▄▀▀▀
    ▀▀    ▀ ▄▀▄▄▄███  ▀▀█ ███▀▀▀█▄▄ ▀
    █▀▀▀▀▀█ █▄█  ▀▄ █ ▀ ▀▀▀▀█ ▀ █ ▄█▄
    █ ███ █ █▄██▀ █▀ ▀▀▀█▀ █▀▀▀▀▀▄▄▀
    █ ▀▀▀ █   ▀█ █▄▄█▀█ ▀ ▀ ▀▄  █▀ █▀
    ▀▀▀▀▀▀▀ ▀  ▀▀    ▀▀ ▀▀▀ ▀▀   ▀▀▀

Generating a Terminal QR Code

const qrcode = require('wifi-qr-code-generator')
const pr = qrcode.generateWifiQRCode({
  ssid: 'Hello world',
  password: 'testpass',
  encryption: 'WPA',
  hiddenSSID: false,
  outputFormat: { type: 'terminal' }
})
pr.then((data) => console.log(data))

This generates the following QR code in your terminal:

Author

👤 Anoop Kunjuraman

• Website: https://anoop.kunjuraman.com
• Twitter: @anoopengineer
• Github: @anoopengineer
• LinkedIn: @anoopkunjuraman

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2020 Anoop Kunjuraman.
This project is MIT licensed.

---

This README was generated with ❤️ by readme-md-generator