Rocket QR Code Pro

Rocket is currently in alpha – available with Datastar Pro.

Dynamic QR code generation using the qr-creator library.

Demo

Explanation #

The QR Code component demonstrates Rocket’s ability to integrate external JavaScript libraries while maintaining reactive data binding. The component uses the qr-creator library loaded dynamically via CDN and automatically regenerates the QR code when props change.

Usage Example #

1<rocket-qrcode
2    data-attr:text="$qrText"
3    data-attr:size="$qrSize"
4    data-attr:error-level="$qrErrorLevel"
5    data-attr:color-dark="$qrColorDark"
6    data-attr:color-light="$qrColorLight"
7></rocket-qrcode>

Rocket Component #

 1<template data-rocket:rocket-qrcode
 2          data-props:text="string|trim|required!|=Hello World"
 3          data-props:size="int|min:50|max:1000|=200"
 4          data-props:error-level="string|upper|oneOf!:L,M,Q,H|=L"
 5          data-props:color-dark="string|regex!:#[0-9a-fA-F]{6}|=#000000"
 6          data-props:color-light="string|regex!:#[0-9a-fA-F]{6}|=#ffffff"
 7          data-import-esm:qr="https://cdn.jsdelivr.net/npm/[email protected]/+esm"
 8>
 9  <script>
10    $$errorText = ''
11
12    effect(() => {
13      const messages = []
14
15      // Local required check so an empty value always shows an error,
16      // even if the Rocket validation state hasn't updated yet.
17      if (!$$text || !String($$text).trim()) {
18        messages.push('Text is required')
19      } else if ($$hasErrs && $$errs?.text) {
20        // Fallback to Rocket validation metadata if present
21        messages.push('Text is required')
22      }
23
24      // Other validation errors surface from Rocket
25      if ($$hasErrs) {
26        if ($$errs?.size) messages.push('Size must be 50-1000px')
27        if ($$errs?.errorLevel) messages.push('Error level must be L, M, Q, or H')
28        if ($$errs?.colorDark || $$errs?.colorLight) messages.push('Colors must be valid hex codes')
29      }
30
31      if (messages.length) {
32        $$errorText = messages.join(', ') || 'Validation failed'
33        return
34      }
35
36      if (!$$canvas) return
37
38      try {
39        qr.render({
40          text: $$text,
41          radius: 0,
42          ecLevel: $$errorLevel,
43          fill: $$colorDark,
44          background: $$colorLight,
45          size: $$size
46        }, $$canvas)
47        // Clear error on success
48        if ($$errorText) {
49          $$errorText = ''
50        }
51      } catch (error) {
52        console.error('[Rocket QR] Error generating QR code:', error)
53        $$errorText = `QR generation failed: ${error.message}`
54      }
55    })
56  </script>
57
58  <div data-style="{width: $$size + 'px', height: $$size + 'px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', position: 'relative'}">
59    <canvas data-if="!$$errorText" data-ref="canvas" style="display: block;"></canvas>
60    <div data-else data-text="$$errorText" style="font-weight: bold; text-align: center;"></div>
61  </div>
62</template>