react-qrcode-logo
Advanced tools
Changelog
[v2.0.1]
Readme
Typescript React component to generate a customizable QR Code. Inspired by cssivision/qrcode-react and zpao/qrcode.react.
npm install --save react-qrcode-logo
import * as React from 'react';
import { QRCode } from 'react-qrcode-logo';
React.render(
<QRCode value="https://github.com/gcoro/react-qrcode-logo" />,
mountNode
);
| Prop | Type | Default value | Description |
|---|---|---|---|
value | string | https://reactjs.org/ | The value encoded in the QR Code. When the QR is decoded, this value will be returned |
ecLevel | string | M | The error correction level of the QR Code. It can be either of 'L', 'M', 'Q', 'H' |
size | number (in pixels) | 150 | The size of the canvas. Note that in this size is included both the QR Code size itself and the padding aound it |
padding | number (in pixels) | 10 | The padding around the QR Code. This will be the same color of the 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 |
style | Object (css style properties) | { height: size, width: size, padding: padding, bgColor: bgColor} | You can specify an object with any css style properties you want to add to the canvas. The properties you specify will override the default ones |
FAQs
React component to generate a QR Code customizable with logo and more properties
The npm package react-qrcode-logo receives a total of 44,547 weekly downloads. As such, react-qrcode-logo popularity was classified as popular.
We found that react-qrcode-logo demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The White House is addressing fragmented cybersecurity regulations as CISOs report spending up to 50% of their time on compliance, aiming to harmonize requirements and improve cybersecurity outcomes.
Security News
Research
The Socket Research Team has identified a malicious Python package that is typosquatting the popular crytic-compile utility, frequently used in popular toolkits and development environments for smart contracts and crypto applications.
Security News
NIST updates on the NVD backlog after media reports that over 50% of KEVs were unenriched since mid-February. They've contracted additional support and partnered with CISA to clear the backlog by fiscal year-end.