react-qr-rounded

React Component for QR code generation.

Features:

• Rounded corners
• Cutout in the middle of the QR code for placing a logo or other image
• Rendered to SVG
• Responsive
• Custom colors
• TypeScript support
• Passing props to SVG element

Available Props

| prop | type | required | default value | |------------------------|------------------------------|----------|---------------| | children | string | yes | | | color | string | | '#000' | | backgroundColor | string | | | | cutout | boolean | | false | | cutoutElement | ReactElement | | | | errorCorrectionLevel | string ('L' 'M' 'Q' 'H') | | 'Q' | | rounding | number (0 - 100) | | 0 | | ... | SVGAttributes<SVGElement> | | |

Examples:

Minimal example:

import ReactDOM from "react-dom";
import { QR } from "react-qr-rounded";

ReactDOM.render(
  <QR>https://iofjuupasli.github.io/react-qr-rounded/</QR>,
  document.getElementById("app")
);

All props:

<QR
  color="#000"
  backgroundColor="#fff"
  rounding={100}
  cutout
  cutoutElement={
    <img
      src="https://random.imagecdn.app/500/500"
      style={{
        objectFit: "contain",
        width: "100%",
        height: "100%",
      }}
    />
  }
  errorCorrectionLevel="H"
>
  https://www.fugo.ai/
</QR>

Result:

LICENSE

MIT

The word 'QR Code' is registered trademark of DENSO WAVE INCORPORATED http://www.denso-wave.com/qrcode/faqpatent-e.html