react-qr-rounded

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