@forward-software/reveal.js-qrcodes NPM

🔳 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

revealjs reveal-js reveal-plugin reveal-js-plugin qr-codes

@forward-software/qrcodets

1.1.0

8 months ago

1.0.0

8 months ago