@jackybaby/react-custom-qrcode

# react-qrcode-logo Typescript React component to generate a customizable QR Code. <div style="display: flex; flex-direction: row;"> <img src="res/qrcode-react.png" height="256" width="256"> <img src="res/qrcode-miku.png" height="256" width="256"> <img src="res/qrcode-ts.png" height="256" width="256"> </div> ## Installation ```bash npm install --save @jackybaby/react-custom-qrcode ``` ## Usage ```javascript import * as React from "react"; import { QRCode } from "@jackybaby/react-custom-qrcode"; React.render( <QRCode value="https://github.com/gcoro/react-qrcode-logo" />, 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 | | `removeQrCodeBehindLogo` | `boolean` | `false` | Removes points behind the logo and adds a border with no points around the logo | | `qrStyle` | `squares` | `dots` | `squares` | Style of the QR Code modules | | `eyeColor` | `string` | `string[]` | | The color for the inner and out parts of positional patterns (the three "eyes" around the QR code). See more details below | | `eyeRadius` | `number` | `number[]` | `number[][]` | | The corner radius for the positional patterns (the three "eyes" around the QR code). See more details below | | `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 | ### About eyeRadius Give the positional pattern custom radii. You can either set one radius for all corners or all positional eyes, or specify a radius for each corner of each eye. Simple example: ```jsx <QRCode value="https://github.com/gcoro/react-qrcode-logo" eyeRadius={5} // 5 pixel radius for all corners of all positional eyes /> ``` Other examples: ```jsx // Radius for each eye eyeRadius={[ 5, // top/left eye 10, // top/right eye 5, // bottom/left eye ]} ``` ```jsx // Radius for each corner (array is: top/left, top/right, bottom/right, bottom/left) eyeRadius={[ [10, 10, 0, 10], // top/left eye [10, 10, 10, 0], // top/right eye [10, 0, 10, 10], // bottom/left ]} ``` ```jsx // Include radius for the inner eye of the top/left eye eyeRadius={[ { // top/left eye outer: [10, 10, 0, 10], inner: [0, 10, 10, 10], }, [10, 10, 10, 0], // top/right eye [10, 0, 10, 10], // bottom/left ]} ``` ```jsx // Color for both parts (inner, out) of eyes eyeColor = "#ffffff"; ``` ```jsx // Color for each part of eyes eyeColor={['#ff0000', '#00ff00']} ``` ## Usage example You can find a very simple demo project [here](https://github.com/gcoro/QRCodeCustomizer). ## Contributing Thanks to everyone who contributed :) PRs and suggestions are welcome. <table> <tr><td align="center" valign="top"> <a href="https://github.com/gcoro"> <img src="https://avatars.githubusercontent.com/u/37499369?v=4" width="100px;" alt="gcoro" /> gcoro</a> </td><td align="center" valign="top"> <a href="https://github.com/jgillick"> <img src="https://avatars.githubusercontent.com/u/35894?v=4" width="100px;" alt="jgillick" /> jgillick</a> </td><td align="center" valign="top"> <a href="https://github.com/JChord"> <img src="https://avatars.githubusercontent.com/u/981214?v=4" width="100px;" alt="JChord" /> JChord</a> </td><td align="center" valign="top"> <a href="https://github.com/halitogunc"> <img src="https://avatars.githubusercontent.com/u/13641726?v=4" width="100px;" alt="halitogunc" /> halitogunc</a> </td><td align="center" valign="top"> <a href="https://github.com/mushang11"> <img src="https://avatars.githubusercontent.com/u/13930277?v=4" width="100px;" alt="mushang11" /> mushang11</a> </td><td align="center" valign="top"> <a href="https://github.com/Trexy94"> <img src="https://avatars.githubusercontent.com/u/16225761?v=4" width="100px;" alt="Trexy94" /> Trexy94</a> </td><td align="center" valign="top"> <a href="https://github.com/ty-everett"> <img src="https://avatars.githubusercontent.com/u/23272461?v=4" width="100px;" alt="ty-everett" /> ty-everett</a> </td><tr/> <tr><td align="center" valign="top"> <a href="https://github.com/larstel"> <img src="https://avatars.githubusercontent.com/u/45731552?v=4" width="100px;" alt="larstel" /> larstel</a> </td></tr> </table> ## 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).