qrcode.react
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/qrcode.react package

    1.0.1 • Public • Published

    qrcode.react

    A React component to generate QR codes.

    Installation

    npm install qrcode.react

    Usage

    var React = require('react');
    var QRCode = require('qrcode.react');
    
    React.render(
      <QRCode value="http://facebook.github.io/react/" />,
      mountNode
    );

    Available Props

    prop type default value
    value string
    renderAs string ('canvas' 'svg') 'canvas'
    size number 128
    bgColor string (CSS color) "#FFFFFF"
    fgColor string (CSS color) "#000000"
    level string ('L' 'M' 'Q' 'H') 'L'
    includeMargin boolean false
    imageSettings object (see below)

    imageSettings

    field type default value
    src string
    x number none, will center
    y number none, will center
    height number 10% of size
    width number 10% of size
    excavate boolean false

    Custom Styles

    qrcode.react will pass through any additional props to the underlying DOM node (<svg> or <canvas>). This allows the use of inline style or custom className to customize the rendering. One common use would be to support a responsive layout.

    Note: In order to render QR Codes in <canvas> on high density displays, we scale the canvas element to contain an appropriate number of pixels and then use inline styles to scale back down. We will merge any additional styles, with custom height and width overriding our own values. This allows scaling to percentages but if scaling beyond the size, you will encounter blurry images. I recommend detecting resizes with something like react-measure to detect and pass the appropriate size when rendering to <canvas>.

    LICENSE ISC

    Install

    npm i qrcode.react

    DownloadsWeekly Downloads

    280,915

    Version

    1.0.1

    License

    ISC

    Unpacked Size

    26.8 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar