# react-qrcode-logo

> React component to generate a QR Code customizable with logo and more properties

Latest version **4.1.0** (published 2026-05-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-qrcode-logo
pnpm add react-qrcode-logo
yarn add react-qrcode-logo
bun add react-qrcode-logo
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 4.1.0 |
| Published | 2026-05-02 |
| First published | 2018-08-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 393.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 602 |
| Author | Giulia Corò, Franco Berton |
| Maintainers | gcoro |
| Keywords | react, typescript, qrcode, custom, logo, opacity, padding |

## Links

- npm: https://www.npmjs.com/package/react-qrcode-logo
- Repository: https://github.com/gcoro/react-qrcode-logo
- Homepage: https://github.com/gcoro/react-qrcode-logo#readme
- Issues: https://github.com/gcoro/react-qrcode-logo/issues
- npm.io page: https://npm.io/package/react-qrcode-logo

## Dependencies (1)

- [qrcode-generator](https://npm.io/package/qrcode-generator.md) ^2.0.4

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 4.1.0 (latest) — 2026-05-02
- 4.0.0 — 2025-08-14
- 3.0.0 — 2024-05-27
- 2.10.0 — 2024-04-16
- 2.9.0 — 2023-02-25
- 2.8.0 — 2022-08-15
- 2.7.0 — 2022-03-29
- 2.6.0 — 2022-03-01
- 2.5.0 — 2021-08-12
- 2.4.0 — 2021-04-01
- 2.3.1 — 2021-03-31
- 2.2.1 — 2019-12-18
- 2.2.0 — 2019-06-17
- 2.1.0 — 2019-05-30
- 2.0.1 — 2019-04-04
- … 4 more at https://npm.io/package/react-qrcode-logo/versions

## README

# 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-mikuv3.png" height="256" width="256">
 <img src="res/qrcode-ts-fluid.png" height="256" width="256">
</div>

## Installation

```bash
npm install --save react-qrcode-logo
```

## Usage

```javascript
// 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` &#124; `M` &#124; `Q` &#124; `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  |
| `logoPadding`            | `number`                            |                     | Adds a border with no points around the logo                                                    |
| `logoPaddingStyle`            | `square` &#124; `circle`        | `square`     | Sets the shape of the padding area around the logo                                                     |
| `logoPaddingRadius`            | `number` &#124; `DOMPointInit` &#124; `(number \| DOMPointInit)[]`        | `0`     | Sets the radius of the padding area around the logo, if `square`                                                     |
| `removeQrCodeBehindLogo` | `boolean`                           |   `false`           | Removes QR cells behind the logo (including its padding, if specified)                                                    |
| `qrStyle`                | `squares` &#124; `dots` &#124; `fluid`            | `squares`  | Style of the QR Code modules                                                                                                       |
| `eyeRadius`              | `CornerRadii` &#124; `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` &#124; `EyeColor[]`      |  | The color for the positional patterns (the three "eyes" around the QR code). [See more details here](res/eyeColor_doc.md)          |
| `pixelRatio`               | `number`      |  `window.devicePixelRatio` | Scale factor for the rendered canvas. Defaults to the device's native pixel ratio for sharp rendering on high-DPI displays. Override for advanced cases (e.g. forcing 1 to reduce memory on dense layouts).          |
| `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](https://react.dev/learn/manipulating-the-dom-with-refs).

| Method Name                     | Arguments                                | Description                                                                                                                      |
|--------------------------|-------------------------------------| ----------------------------------------------------------------------------------------------------------------------------------|
| `download`                  | `fileType?`: `'png'` &#124; `'jpg'` &#124; `'webp'`, `fileName?: string`                            | This function will download the QR Code as image. Format and file name can be specified                                         |

## Standalone functions

These functions can be imported and called directly, without mounting the `<QRCode />` component. Useful for generating QR codes server-side-rendered previews, background uploads, or composing the QR into a larger canvas. 
All accept the same rendering options as the component props (e.g. `value`, `size`, `fgColor`, `logoImage`, etc.), except `id` and `style` which only apply to the React component. Note that in this case the default value of the prop `pixelRatio` is set to 1 for predictable pixel-perfect export.

| Function Name                     | Arguments                                | Returns                      | Description                                                                                                                      |
|--------------------------|-------------------------------------|-------------------------| ----------------------------------------------------------------------------------------------------------------------------------|
| `downloadQRCode`   | `opts: QRRenderOptions`,  `fileType?: 'png' \| 'jpg' \| 'webp'`,  `fileName?: string`  | `Promise<void>` | Generates the QR code and triggers a browser download. Does not require a mounted component.                                                 |
| `generateBlob`     | `opts: QRRenderOptions`, `fileType?: 'png' \| 'jpg' \| 'webp'` | `Promise<Blob>`               | Returns the QR code as a `Blob`. Ideal for uploads (`FormData`, `fetch`) where base64 overhead should be avoided.                            |
| `generateDataURL`  | `opts: QRRenderOptions`,  `fileType?: 'png' \| 'jpg' \| 'webp'`  | `Promise<string>`             | Returns the QR code as a data URL (`data:image/png;base64,...`). Useful for inline `<img src>`, CSS backgrounds, or embedding in HTML emails. |
| `generateCanvas`   | `opts: QRRenderOptions` | `Promise<HTMLCanvasElement>`  | Returns the fully-rendered `HTMLCanvasElement`. Use when composing the QR with other canvas content or post-processing pixels.               |

## Example

You can find a demo project [in this repo](https://github.com/gcoro/QRCodeCustomizer) - and the respective live version [at this url](https://gcoro.github.io/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).

To generate the dist for both cjs and esm, you can run `npx tsc -p tsconfig.cjs.json && npx tsc -p tsconfig.esm.json`.  

Thanks to everyone who contributed and/or will contribute :)

## 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).

---
_Source: https://npm.io/package/react-qrcode-logo · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._