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 | | |

Examples:

$3

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

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

$3

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

``

#### Result:

!_home_iofjuupasli_projects_react-qr-rounded_examples_index html

LICENSE

MIT

The word 'QR Code' is registered trademark of DENSO WAVE INCORPORATED

http://www.denso-wave.com/qrcode/faqpatent-e.html