@bloomprotocol/qr-react
TypeScript icon, indicating that this package has built-in type declarations

3.2.0 • Public • Published

QR React

SVG QR Renderer For React

Installation

npm install --save @bloomprotocol/qr-react

Usage

import { QR } from '@bloomprotocol/qr-react';

const MyComponent: React.FC = (props) => {
  return (
    <QR
      data={{
        url: 'https://bloom.co',
      }}
      height={256}
      width={256}
    />
  );
};

QR Example

Props

In addition to the custom props outlined below you can provide any extra <svg> props.

Name Description Type Default
data The data displayed in the QR code Record<string, unknown> | string -
bgColor Background color of the QR code string "#ffffff00"
fgColor Color of the QR code dots and eyes string "#6067f1"
logo Configuration of the logo to be displayed in the center of the QR code See below See below
eyeAs Optional custom component used to render the eyes of the QR React.ComponentType<QREyeProps> -
dotAs Optional custom component used to render the dots of the QR React.ComponentType<QRDotProps> -

Logo Config

Name Description Type Default
image URL of the image to display (can be a data URL) string SVG of the Bloom logo
width Width of the image number 20% of the QR code
height Height of the image number width
opacity Opacity of the image number 1
import { QR } from '@bloomprotocol/qr-react';

const MyComponent: React.FC = (props) => {
  return (
    <QR
      data={{
        url: 'https://bloom.co',
      }}
      logo={{
        image: 'https://placekitten.com/200/200',
      }}
      height={256}
      width={256}
    />
  );
};

Readme

Keywords

none

Package Sidebar

Install

npm i @bloomprotocol/qr-react

Weekly Downloads

22

Version

3.2.0

License

Apache-2.0

Unpacked Size

68.8 kB

Total Files

13

Last publish

Collaborators

  • djvs