G2Plot-QRCode

$ npm i --save g2plot-qrcode

import { G2Plot } from '@antv/g2plot';
import { adaptor, defaultOptions } from 'g2plot-qrcode';

const qr = new G2Plot('container', {
  // Текст QR-кода
  data: 'Hello, g2plot qrcode!',
  // Интервал
  padding: 8,
  // Ширина и высота
  width: 120,
  height: 120,
  // Цвет фона и переднего плана
  backgroundColor: 'white',
  foregroundColor: 'black',
  typeNumber: 0,
  correctLevel: 'H', // L M H Q
  // Стиль оформления
  pixelStyle: (pixelData) => ({}),
}, adaptor, defaultOptions);

qr.render();

qr.update({
  data: 'hello world!',
});

export interface QRCodeOptions {
  /** Текст QR-кода */
  readonly data: string;
  /** Интервал по умолчанию 8px */
  readonly padding?: number;
  /** Размер QR-кода по умолчанию 120px */
  readonly width: string;
  readonly height: string;
  /** Уровень коррекции QR-кода, по умолчанию H */
  readonly correctLevel?: 'L' | 'M' | 'Q' | 'H';
  /** Тип номера QR-кода, по умолчанию 0 */
  readonly typeNumber?: any;
  // readonly effect?: 'fusion' | 'round' | 'rect';
  /** Цвет переднего плана, по умолчанию black */
  readonly foregroundColor?: string;
  /** Цвет фона, по умолчанию white */
  readonly backgroundColor?: string;
  /** Значок в центре QR-кода, по умолчанию нет */
  readonly icon?: {
    readonly image: string; // Изображение
    readonly width?: number; // Ширина изображения
    readonly height?: number;
  };
  /** Стиль ячейки, по умолчанию нет */
  readonly pixelStyle?: (pixelData: PixelData) => object;
}