react-qrcode-logo
v3.0.0
Published
React component to generate a QR Code customizable with logo and more properties
Downloads
295,819
Maintainers
Readme
react-qrcode-logo
Typescript React component to generate a customizable QR Code.
Installation
npm install --save react-qrcode-logo
Usage
// import
import { QRCode } from 'react-qrcode-logo';
// usage
<QRCode value="https://github.com/gcoro/react-qrcode-logo" />
Compatibility
If you are using a React version >= 18, use react-qrcode-logo version >= 3.0.0
Props
| Prop | Type | Default value | Description |
|--------------------------|-------------------------------------| --------------------|----------------------------------------------------------------------------------------------------------------------------------|
| value
| string
| https://reactjs.org/
| The value encoded in the QR Code. When the QR Code is decoded, this value will be returned |
| ecLevel
| L
| M
| Q
| H
| M
| The error correction level of the QR Code |
| enableCORS
| boolean
| false
| Enable crossorigin attribute |
| size
| number
(in pixels) | 150
| The size of the QR Code |
| quietZone
| number
(in pixels) | 10
| The size of the quiet zone around the QR Code. This will have the same color as QR Code bgColor |
| bgColor
| string
(css color) | #FFFFFF
| Background color |
| fgColor
| string
(css color) | #000000
| Foreground color |
| logoImage
| string
(src attribute) | | The logo image. It can be a url/path or a base64 value |
| logoWidth
| number
(in pixels) | size * 0.2
| Logo image width |
| logoHeight
| number
(in pixels) | logoWidth
| Logo image height |
| logoOpacity
| number
(css opacity 0 <= x <= 1) | 1
| Logo opacity. This allows you to modify the transparency of your logo, so that it won't compromise the readability of the QR Code |
| removeQrCodeBehindLogo
| boolean
| false
| Removes points behind the logo. If no logoPadding is specified, the removed part will have the same size as the logo |
| logoPadding
| number
| | Adds a border with no points around the logo. When > 0, the padding will be visible even if the prop removeQrCodeBehindLogo is not set to true |
| logoPaddingStyle
| square
| circle
| square
| Sets the shape of the padding area around the logo |
| qrStyle
| squares
| dots
| fluid
| squares
| Style of the QR Code modules |
| eyeRadius
| CornerRadii
| CornerRadii[]
| | The corner radius for the positional patterns (the three "eyes" around the QR code). See more details here |
| eyeColor
| EyeColor
| EyeColor[]
| | The color for the positional patterns (the three "eyes" around the QR code). See more details here |
| id
| string
| react-qrcode-logo
| Optional custom id for the QRCode canvas. You can use this prop if you have multiple QRCodes and need to differentiate them |
| style
| React.CSSProperties
| | CSS style properties that will be applied to the canvas component |
Events
| Event Name | Returns | Description |
|--------------------------|-------------------------------------| ----------------------------------------------------------------------------------------------------------------------------------|
| logoOnLoad
| event: Event
| Event that fires when the QR Code logo image has been loaded |
Methods
Methods must be called on a valid QRCode ref - learn more.
| Method Name | Arguments | Description |
|--------------------------|-------------------------------------| ----------------------------------------------------------------------------------------------------------------------------------|
| download
| fileType?
: 'png'
| 'jpg'
| 'webp'
, fileName?: string
| This function will download the QR Code as image. Format and file name can be specified |
Example
You can find a demo project here.
Contributing
PRs and suggestions are welcome. When making a pull request, please explain in a clear way the changes you made and why you are making them (+ if you can also update the README accordingly, ty <3). Also try keep the current repo codestyle (eg. do not reformat all the code with prettier).
Thanks to everyone who contributed and/or will contribute :)
More credits
This package was inspired by cssivision/qrcode-react and zpao/qrcode.react. Also looked up some parts from kazuhikoarase/qrcode-generator (which this package depends on).