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
The word 'QR Code' is registered trademark of DENSO WAVE INCORPORATED
http://www.denso-wave.com/qrcode/faqpatent-e.html