# @nico-martin/react-qr-code

> A QR code generator for React and React Native.

Latest version **2.0.12** (published 2022-05-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nico-martin/react-qr-code
pnpm add @nico-martin/react-qr-code
yarn add @nico-martin/react-qr-code
bun add @nico-martin/react-qr-code
```

## Health

**Score 25/100 (F)** — status: abandoned.

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

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.12 |
| Published | 2022-05-11 |
| First published | 2022-05-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 15 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Nico Martin |
| Maintainers | nico_martin |
| Keywords | react, react-native, qr, code, generator |

## Links

- npm: https://www.npmjs.com/package/@nico-martin/react-qr-code
- Repository: https://github.com/nico-martin/react-qr-code
- Homepage: https://github.com/nico-martin/react-qr-code#readme
- Issues: https://github.com/nico-martin/react-qr-code/issues
- npm.io page: https://npm.io/package/@nico-martin/react-qr-code

## Dependencies (2)

- [qr.js](https://npm.io/package/qr.js.md) 0.0.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2

## Alternatives

- [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads
- [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads
- [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads
- [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads
- [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads

## Recent versions

- 2.0.12 (latest) — 2022-05-11
- 2.0.11 — 2022-05-11
- 2.0.10 — 2022-05-11
- 2.0.9 — 2022-05-11
- 2.0.8 — 2022-05-11

## README

# react-qr-code

A <QRCode /> component for React. This library works with React and React Native
(using [React Native SVG](https://github.com/react-native-svg/react-native-svg)).

This is a fork of [https://github.com/rosskhanas/react-qr-code](https://github.com/rosskhanas/react-qr-code) by [Ross Khanas](https://rosskhanas.github.io/) that implements the viewbox attribute.

### Screenshots

#### [Web](https://rosskhanas.github.io/react-qr-code/)

<img src="https://github.com/rosskhanas/react-qr-code/blob/master/demo-web.png" width="640" />

#### Android & iOS

<div float="left">
    <img src="https://github.com/rosskhanas/react-qr-code/blob/master/demo-android.png" width="320" />
    <img src="https://github.com/rosskhanas/react-qr-code/blob/master/demo-ios.png" width="265" />
</div>

### Installation

```
yarn add @nico-martin/react-qr-code
```

When using this library with React Native, you will also need to [have `react-native-svg` installed](https://github.com/react-native-svg/react-native-svg#installation).

```
yarn add react-native-svg
cd ios && pod install
```

### The Gist

```javascript
import React from "react";
import ReactDOM from "react-dom";
import QRCode from "react-qr-code";

ReactDOM.render(<QRCode value="hey" />, document.getElementById("Container"));
```

Note: If the QR code is likely to appear next to dark objects, you will need to wrap it in a light-colored container to preserve the '[quiet zone](https://qrworld.wordpress.com/2011/08/09/the-quiet-zone/)', e.g. 
```javascript
<div style={{ background: 'white', padding: '16px' }}>
    <QRCode ... />
</div>
```


### API

| prop      | type                         | default value |
| --------- | ---------------------------- | ------------- |
| `bgColor` | `string`                     | '#FFFFFF'     |
| `fgColor` | `string`                     | '#000000'     |
| `level`   | `string` (`'L' 'M' 'Q' 'H'`) | 'L'           |
| `size`    | `number`                     | 256           |
| `title`   | `string`                     |               |
| `value`   | `string`                     |               |

### License

MIT

---
_Source: https://npm.io/package/@nico-martin/react-qr-code · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._