@gfazioli/mantine-qr-code

A highly customizable QR Code component for React applications built with Mantine.

Version

v1.0.0

Changelog

View the Changelog

Source

View source code

Package

@gfazioli/mantine-qr-code

Mantine Extensions

Docs

Edit this page

Built by

Giovambattista Fazioli (@gfazioli)

License

MIT

Support

Become a sponsor

Installation

yarn add @gfazioli/mantine-qr-code

After installation import package styles at the root of your application:

import '@gfazioli/mantine-qr-code/styles.css';

You can import styles within a layer @layer mantine-qr-code by importing @gfazioli/mantine-qr-code/styles.layer.css file.

import '@gfazioli/mantine-qr-code/styles.layer.css';

Usage

import { QRCode } from '@gfazioli/mantine-qr-code';

function Demo() {
  return (
    <QRCode value="https://mantine.dev" />
  );
}

Configurator

Explore all available props and see the component in action:

import { QRCode } from '@gfazioli/mantine-qr-code';

function Demo() {
  return (
    <QRCode value="https://mantine.dev"/>
  );
}

Colors

The QRCode component supports all Mantine theme colors. Use the color and background props to customize:

red

blue

violet

teal

orange

cyan

import { Group, Stack, Text } from '@mantine/core';
import { QRCode } from '@gfazioli/mantine-qr-code';

function Demo() {
  return (
    <Group>
      {['red', 'blue', 'violet', 'teal', 'orange', 'cyan'].map((color) => (
        <Stack key={color} align="center" gap="xs">
          <QRCode value="https://mantine.dev" color={color} />
          <Text size="xs" tt="capitalize">{color}</Text>
        </Stack>
      ))}
    </Group>
  );
}

Dot styles

Control the appearance of data modules with the dotStyle prop:

Square

Rounded

Dots

import { Group, Stack, Text } from '@mantine/core';
import { QRCode } from '@gfazioli/mantine-qr-code';

function Demo() {
  return (
    <Group>
      <Stack align="center" gap="xs">
        <QRCode value="https://mantine.dev" dotStyle="square" size="lg" />
        <Text size="xs">Square</Text>
      </Stack>
      <Stack align="center" gap="xs">
        <QRCode value="https://mantine.dev" dotStyle="rounded" size="lg" />
        <Text size="xs">Rounded</Text>
      </Stack>
      <Stack align="center" gap="xs">
        <QRCode value="https://mantine.dev" dotStyle="dots" size="lg" />
        <Text size="xs">Dots</Text>
      </Stack>
    </Group>
  );
}

Corner styles

Customize the three finder patterns (corners) with the cornerStyle prop:

Square

Rounded

Dots

import { Group, Stack, Text } from '@mantine/core';
import { QRCode } from '@gfazioli/mantine-qr-code';

function Demo() {
  return (
    <Group>
      <Stack align="center" gap="xs">
        <QRCode value="https://mantine.dev" cornerStyle="square" size="lg" />
        <Text size="xs">Square</Text>
      </Stack>
      <Stack align="center" gap="xs">
        <QRCode value="https://mantine.dev" cornerStyle="rounded" size="lg" />
        <Text size="xs">Rounded</Text>
      </Stack>
      <Stack align="center" gap="xs">
        <QRCode value="https://mantine.dev" cornerStyle="dots" size="lg" />
        <Text size="xs">Dots</Text>
      </Stack>
    </Group>
  );
}

Error correction

QR codes support four error correction levels. Higher levels allow more damage tolerance but produce denser codes:

L (7%)

M (15%)

Q (25%)

H (30%)

import { Group, Stack, Text } from '@mantine/core';
import { QRCode } from '@gfazioli/mantine-qr-code';

function Demo() {
  return (
    <Group>
      {(['L', 'M', 'Q', 'H'] as const).map((level) => (
        <Stack key={level} align="center" gap="xs">
          <QRCode value="https://mantine.dev" errorCorrectionLevel={level} size="lg" />
          <Text size="xs">{level} ({level === 'L' ? '7%' : level === 'M' ? '15%' : level === 'Q' ? '25%' : '30%'})</Text>
        </Stack>
      ))}
    </Group>
  );
}

Image overlay

Add a logo or image at the center of the QR code. Use errorCorrectionLevel="H" for best results when overlaying images:

import { Group } from '@mantine/core';
import { QRCode } from '@gfazioli/mantine-qr-code';

function Demo() {
  return (
    <Group>
      <QRCode
        value="https://mantine.dev"
        size="xl"
        image="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-1.png"
        errorCorrectionLevel="H"
      />
      <QRCode
        value="https://mantine.dev"
        size="xl"
        image="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-1.png"
        errorCorrectionLevel="H"
        dotStyle="dots"
        cornerStyle="dots"
        imageRadius="md"
      />
    </Group>
  );
}

Download

Use the useQRCodeDownload hook to download the QR code as SVG or PNG:

import { Button, Group, Stack } from '@mantine/core';
import { QRCode, useQRCodeDownload } from '@gfazioli/mantine-qr-code';

function Demo() {
  const { ref, download } = useQRCodeDownload({ fileName: 'my-qr-code' });

  return (
    <Stack align="center">
      <QRCode ref={ref} value="https://mantine.dev" size="xl" />
      <Group>
        <Button onClick={() => download({ format: 'svg' })} variant="light">
          Download SVG
        </Button>
        <Button onClick={() => download({ format: 'png' })} variant="light">
          Download PNG
        </Button>
      </Group>
    </Stack>
  );
}

Styles API

QRCode supports Styles API, you can add styles to any inner element of the component with classNames prop. Follow Styles API documentation to learn more.

Component Styles API

Hover over selectors to highlight corresponding elements

/*
 * Hover over selectors to apply outline styles
 *
 */

Use cases

QR codes can encode various data types including URLs, WiFi credentials, and contact information:

URL

WiFi

vCard

import { Group, Stack, Text } from '@mantine/core';
import { QRCode } from '@gfazioli/mantine-qr-code';

function Demo() {
  return (
    <Group>
      <Stack align="center" gap="xs">
        <QRCode value="https://mantine.dev" size="lg" dotStyle="rounded" cornerStyle="rounded" />
        <Text size="xs">URL</Text>
      </Stack>
      <Stack align="center" gap="xs">
        <QRCode
          value="WIFI:T:WPA;S:MyNetwork;P:MyPassword;;"
          size="lg"
          dotStyle="dots"
          cornerStyle="dots"
          color="blue"
        />
        <Text size="xs">WiFi</Text>
      </Stack>
      <Stack align="center" gap="xs">
        <QRCode
          value="BEGIN:VCARD\nVERSION:3.0\nFN:John Doe\nTEL:+1234567890\nEMAIL:john@example.com\nEND:VCARD"
          size="lg"
          color="teal"
          errorCorrectionLevel="H"
        />
        <Text size="xs">vCard</Text>
      </Stack>
    </Group>
  );
}

Mantine Qr Code

@gfazioli/mantine-qr-code

Installation

Usage

Configurator

Colors

Dot styles

Corner styles

Error correction

Image overlay

Download

Styles API

Use cases

HIGHLIGHTS

RESOURCES

ECOSYSTEM