Skip to main content

SVG without React

qrCodeToSvgString renders a code to a standalone SVG document, with the same geometry as the component. It has no React or React Native dependency.

import { qrCodeToSvgString } from 'react-native-qr-svg';

const svg = qrCodeToSvgString({
  value: 'https://example.com',
  size: 512, // omit for width/height="100%"
  shape: 'liquid',
  color: { type: 'gradient', colors: ['#5b4cf0', '#e0388c'] },
  finderPattern: { outer: 'circle' },
  quietZone: 4,
});

Use it to:

  • share or save a code: write the string to a .svg file, or pass it to an SVG-to-PNG converter;
  • render on a server (an API that returns QR images, an email template);
  • render on the web without react-native-web: <div dangerouslySetInnerHTML={{ __html: svg }} /> (the string is generated by the library; attribute values are escaped);
  • test what your app draws.

logoCells clears the logo area; draw the logo on top yourself.

The QR matrix​

encodeQr(value, level) returns the raw symbol: which modules are dark and what each one is part of (data, finder, alignment, timing, format). Use it to draw codes with any other graphics library.

import { encodeQr } from 'react-native-qr-svg';

const { size, dark, kind, version, errorCorrectionLevel } = encodeQr('Hello', 'M');