Documentation

Examples

Copy-paste examples covering dot styles, corner styles, colors, logos, React Native, and export.

Default

<QRCode value="https://example.com" />

Rounded dots

<QRCode
  value="https://example.com"
  dotStyle="rounded"
  corner={{ square: { style: 'extra-rounded' } }}
/>

Circle dots

<QRCode
  value="https://example.com"
  dotStyle="circle"
  corner={{
    square: { style: 'circle' },
    dot: { style: 'circle' },
  }}
/>

Accent corners (single color)

<QRCode
  value="https://example.com"
  dotStyle="rounded"
  corner={{
    square: { style: 'extra-rounded', color: '#14b8a6' },
    dot: { color: '#14b8a6' },
  }}
/>

Transparent background

<QRCode
  value="https://example.com"
  dotStyle="rounded"
  dotColor="#ffffff"
  backgroundColor="transparent"
  corner={{ square: { style: 'extra-rounded' } }}
/>

With logo — ECL auto-picked

<QRCode
  value="https://example.com"
  dotStyle="rounded"
  corner={{ square: { style: 'extra-rounded' } }}
  logo={{
    src: 'https://avatars.githubusercontent.com/u/48100204?size=64',
    size: 0.5,
    margin: 0.5,
  }}
/>

Rounded logo

<QRCode
  value="https://example.com"
  dotStyle="rounded"
  corner={{ square: { style: 'extra-rounded' } }}
  logo={{
    src: 'https://avatars.githubusercontent.com/u/48100204?size=64',
    size: 0.5,
    margin: 0.5,
    radius: 1,
  }}
/>

Version 1 — numeric data

<QRCode
  value="12345"
  qr={{ version: 1, errorCorrectionLevel: 'L' }}
/>

React Native and Expo (preview drawn on the web)

import { QRCode } from '@ttsalpha/qrcode/native';

<QRCode
  value="https://example.com"
  size={240}
  dotStyle="rounded"
  corner={{ square: { style: 'extra-rounded' } }}
  logo={{ src: require('./logo.png'), radius: 0.3 }}
  onError={(error) => console.warn(error.message)}
/>