Customizable QR code generated for React & React Native
npm install react-fancy-qrcodeCreates a stylish QR code for both React (web) & React Native.

This project was inspired by react-native-qrcode-svg.
With Yarn
``bash`
yarn add react-fancy-qrcode react-native-svg
Or with npm
`bash`
npm install -S react-fancy-qrcode react-native-svg
For React native and iOS, you'll need to perform a pod-install:
`bash`
npx pod-install ios
`jsx`
size={400}
dotScale={0.8}
dotRadius="50%"
positionRadius={["5%", "1%"]}
errorCorrection="H"
logo={require("images/fire.png")}
/>

| Name | Default | Description |
| ------------------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------- |
| value | "" | The value to encode into the QR code |{uri: 'base64string'}
| size | 100 | The pixel width/height of the generated QR code |
| margin | 0 | Space around the QR code (useful if you're generating an image with it) |
| logo | - | Image to place in the center of the QR code (either , require('pathToImage'), or URL string) |size
| logoSize | - | The size to make the logo. Defaults to 20% of the prop. (if it covers more than 20%, QR code data might be lost) |['0%', '0%', '100%', '100%']
| backgroundColor | white | The QR code background color |
| color | black | Primary foreground color of the QR code. If the value is an array of strings, it's treated as a linear gradient |
| colorGradientDirection | | If color is defined as a linear gradient, this defines the gradient direction. Array format: [x1, y1, x2, y2] |color
| positionColor | - | Color of the positioning squares in the top-left, top-right, and bottom-left. Defaults to the property |colorGradientDirection
| positionGradientDirection | ['0%', '0%', '100%', '100%'] | See explanation. |.1 - 1
| positionRadius | 0 | The radius of the positioning pattern squares. See examples below. |
| dotScale | 1.0 | Scale down the dots by setting this to a value between . |
| dotRadius | 0 | The corner radius of each dot as a pixel or percent |
| errorCorrection | M | QR Code error correction mode (more info) |
You can use a ref to download the image data from the root SVG element (via react-native-svg).
`jsx
import React, { useCallback, useRef } from 'react';
import QRCode, { QRCodeRef } from 'react-fancy-qrcode';
function RenderQRCode() {
const svgRef = useRef
const download = useCallback(() => {
svgRef.current?.toDataURL((data) => {
console.log(data);
})
}, [svgRef.current])
return (
value={"https://github.com/jgillick/react-fancy-qrcode"}
size={400}
/>
)
}
`
On web you cannot export the binary SVG data but you can get the SVG source.
In theory you could then use a JavaScript SVG -> PNG converter (like canvg) to convert the SVG source to an image.
Here's an example of getting the SVG source:
`jsx
import React, { useCallback, useRef } from 'react';
import QRCode, { QRCodeRef } from 'react-fancy-qrcode';
function RenderQRCode() {
const svgRef = useRef
const download = useCallback(() => {
const svgSource = svgRef.current?.outerHTML;
console.log(svgSource);
}, [svgRef.current])
return (
value={"https://github.com/jgillick/react-fancy-qrcode"}
size={400}
/>
)
}
`
The three large squares in the QR code (top-left, top-right, bottom-left) are used by QR code readers to determine the position of the QR code.
NOTE: If you customize the squares too much, QR code readers might not recognize the QR code.
If defined as a single pixel/percent value, this will be used for all 3 patters, both outside and inside squares.
`jsx`
value={"https://github.com/jgillick/react-fancy-qrcode"}
size={400}
/>
If defined as an array, the first index is for the outer square and the second is for the inner square of each pattern.
`jsx`
value={"https://github.com/jgillick/react-fancy-qrcode"}
size={400}
/>
You can also define each radius as an object with an rx and ry value (learn more)
`jsx`
value={"https://github.com/jgillick/react-fancy-qrcode"}
size={400}
/>
or
`jsx`
{ rx: "5%", ry: "10%" },
{ rx: 1, ry: 20 },
]}
value={"https://github.com/jgillick/react-fancy-qrcode"}
size={400}
/>
`jsx``
size={300}
color={["#2BC0E4", "#EAECC6"]}
positionColor="#348AC7"
/>
