1.0.0 • Published 2 years ago
react-qr-rounded v1.0.0
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
1.0.0
2 years ago