🔳 QR Codes

Custom plugin for Reveal.js to show QR Codes by adding a single class to HTML elements.

How To

Simply include RevealQRCodes plugin

Reveal.initialize({
  // ...
  plugins: [
    // ...,
    RevealQRCodes,
  ],
});

And add the required class and data attributes to HTML elements you'd like to turn into QR Codes

<a href="https://example.com/" class="qrcode" data-size=500></a>

Configuration

Global Configuration

You can configure the plugin with the following options:

// ...
plugins: [ /* ... */ ],
qrcodes: {
    selector: ".qrcode",
    size: 256,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctionLevel: "H"
}

| Name | Type | Description | Default | | ----------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | selector | String | CSS selector to use when searching HTML elements to render as QR Codes | ".qrcode" | | size | Number | Default size (Width and Height) to render QR Codes | 256 | | colorDark | String | Color to use for "dark" segments of QR Codes | "#000000" | | colorLight | String | Color to use for "light" segments of QR Codes | "#ffffff" | | correctionLevel | String | Correction level to include in the generated QR Codes. Follows this schema: "L" for "Low", "M" for "Medium", "Q" for "Quartile", "H" for "High" | "H" | | configurations | Record<String, QRCodeConfiguration> | An object containing keyed custom configurations for specific QR Codes. | {} |

QR Code Configuration

To configure a specific QR Code properties you can either set data attributes for an HTML element (see HTML Element Configuration section) or use the configurations option (see QR Codes Static Configuration section).

HTML Element Configuration

You can customize each QR Code by applying to a specific HTML element the following data attributes

| Name | Default | | ----------------------- | -------------------------------------------------------------------------------------------------------------------- | | data-text | QR Code content to be rendered, if not set the plugin will use the href attribute value (if available) as content. | | data-size | see size in Global Configuration | | data-color-dark | see colorDark in Global Configuration | | data-color-light | see colorLight in Global Configuration | | data-correction-level | see correctionLevel in Global Configuration |

[!TIP] The generated QR Code will contain the value of the data-text data attribute or fallback to the href attribute one.

QR Codes Static Configuration

You can customize each QR Code by defining a configuration in the configurations option in Global Configuration and adding an ID to a specific HTML element.

Available QRCodeConfiguration parameters are as follow:

| Name | Default | | ----------------- | -------------------------------------------------------------------------------------------------------------------- | | text | QR Code content to be rendered, if not set the plugin will use the href attribute value (if available) as content. | | size | see size in Global Configuration | | colorDark | see colorDark in Global Configuration | | colorLight | see colorLight in Global Configuration | | correctionLevel | see correctionLevel in Global Configuration |

[!IMPORTANT] Parameters specified in the configurations object will take precedence over HTML element data attributes

Example

Specify a QR Code configuration

// ...
plugins: [ /* ... */ ],
qrcodes: {
    selector: ".qrcode",
    configurations: {
        "example-qr-code": {
            text: "https://example.com/",
            size: 512,
            correctionLevel: 1
        }
    }
}

and set an element ID

<p id="example-qr-code" class="qrcode"></p>

Tips

QR Code size

Since Reveal.js will add constraints to max-width and max-height through CSS for img, we suggest adding the following class to revert this behaviour for QR Code images

.qrcode img {
  max-width: 100%;
  max-height: 100%;
}

[!NOTE] Change .qrcode selector with the class you chose as selector in Global Configuration

License

MIT

Made with ✨ & ❤️ by ForWarD Software and contributors