Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gcoro/react-qrcode-logo
React + Typescript component to generate a QR Code with custom colors and logo
https://github.com/gcoro/react-qrcode-logo
Last synced: 3 months ago
JSON representation
React + Typescript component to generate a QR Code with custom colors and logo
- Host: GitHub
- URL: https://github.com/gcoro/react-qrcode-logo
- Owner: gcoro
- License: mit
- Created: 2018-08-01T15:08:33.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-12-12T03:31:01.000Z (6 months ago)
- Last Synced: 2024-01-16T08:11:27.584Z (5 months ago)
- Language: TypeScript
- Homepage:
- Size: 330 KB
- Stars: 392
- Watchers: 3
- Forks: 36
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- fuck-awesome-stars - gcoro/react-qrcode-logo - React + Typescript component to generate a QR Code with custom colors and logo (TypeScript)
- awesome-qrcode - react-qrcode-logo
README
# react-qrcode-logo
Typescript React component to generate a customizable QR Code.
## Installation
```bash
npm install --save react-qrcode-logo
```
## Usage
```javascript
import * as React from 'react';
import { QRCode } from 'react-qrcode-logo';
React.render(
,
mountNode
);
```
## 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 |
| `logoOnLoad` | `() => void` | | Callback function to know when the logo in the QR Code is loaded |
| `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` | `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](res/eyeRadius_doc.md) |
| `eyeColor` | `EyeColor` | `EyeColor[]` | | The color for the positional patterns (the three "eyes" around the QR code). [See more details here](res/eyeColor_doc.md) |
| `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 |
## Usage example
You can find a very simple demo project [here](https://github.com/gcoro/QRCodeCustomizer).
## 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 :)
gcoro
jgillick
dos1in
halitogunc
qwei-1874
Trexy94
ty-everett
larstel
## More credits
This package was inspired by [cssivision/qrcode-react](https://github.com/cssivision/qrcode-react) and [zpao/qrcode.react](https://github.com/zpao/qrcode.react). Also looked up some parts from [kazuhikoarase/qrcode-generator](https://github.com/kazuhikoarase/qrcode-generator) (which this package depends on).