React, Vue, Svelte and a plain page

Every wrapper is a thin layer over the same core, so all of them behave identically.

React#

import { useRef } from 'react';
import { QrCode } from '@devix-labs/qr-code/react';
import '@devix-labs/qr-code/styles.css';

function Ticket({ url }) {
  const qr = useRef(null);

  return (
    <>
      <QrCode ref={qr} value={url} logo={{ src: '/logo.svg' }} level="H" />
      <button onClick={() => qr.current.download('ticket.png')}>Download</button>
    </>
  );
}

The ref gives you toSvg(), toBlob(size), download(filename) and instance. Options apply as they change, so value can come straight from state.

Vue#

<script setup>
import { onMounted, onBeforeUnmount, ref, watch } from 'vue';
import { qrCode } from '@devix-labs/qr-code/vue';
import '@devix-labs/qr-code/styles.css';

const props = defineProps({ value: String });
const host = ref(null);
let qr;

onMounted(() => { qr = qrCode(host.value, { value: props.value, level: 'H' }); });
watch(() => props.value, (value) => qr?.setValue(value));
onBeforeUnmount(() => qr?.destroy());
</script>

<template><div ref="host" /></template>

Svelte#

<script>
  import { qr } from '@devix-labs/qr-code/svelte';
  import '@devix-labs/qr-code/styles.css';

  export let value = 'https://devix.pk';
</script>

<div use:qr={{ value, level: 'H', logo: { src: '/logo.svg' } }} />

A web component#

<script type="module" src="https://devix.pk/cdn/oss/qr-code@1.0.0/element.js"></script>

<dx-qr value="https://devix.pk" level="H" logo="/logo.svg" logo-size="0.2"></dx-qr>

Attributes: value, level, shape, dark, light, size, logo, logo-size. They are observed, so changing one re-renders. .code exposes the instance.

A plain page, from the CDN#

<link rel="stylesheet" href="https://devix.pk/cdn/oss/qr-code@1.0.0/qr-code.min.css">
<script src="https://devix.pk/cdn/oss/qr-code@1.0.0/qr-code.min.js"></script>
<script>
  DevixQrCode.createQrCode(document.querySelector('#code'), { value: location.href });
</script>

On a server, or in a build#

There is no DOM in the encoder or the SVG renderer, so both run in Node, in a worker, or at build time:

import { encode, toSvg } from '@devix-labs/qr-code';
import { writeFile } from 'node:fs/promises';

await writeFile('ticket.svg', toSvg(encode(url, { level: 'H' })));

// Laravel: the SVG is just a string, so cache it and print it.
$svg = Cache::rememberForever("qr:{$ticket->id}", fn () => Http::get(...)->body());

Generating the SVG in Node at build time and storing the string is usually better than generating it in the browser on every view — it is a few hundred bytes, and it makes the code printable from a server-rendered page with no JavaScript at all.