# @rxts/react-qrcode

> 🤳 A React component for QR code generation with `qrcode`

Latest version **0.1.1** (published 2019-09-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rxts/react-qrcode
pnpm add @rxts/react-qrcode
yarn add @rxts/react-qrcode
bun add @rxts/react-qrcode
```

## Health

**Score 40/100 (D)** — status: abandoned.

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

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2019-09-09 |
| First published | 2019-09-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 39.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | JounQin |
| Maintainers | jounqin |
| Keywords | react-qrcode, qrcode, react |

## Links

- npm: https://www.npmjs.com/package/@rxts/react-qrcode
- Repository: https://github.com/rx-ts/react
- Homepage: https://github.com/rx-ts/react#readme
- Issues: https://github.com/rx-ts/react/issues
- npm.io page: https://npm.io/package/@rxts/react-qrcode

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

- 0.1.1 (latest) — 2019-09-09
- 0.1.0 — 2019-09-08

## README

# VueQRCode

> 🤳 A React component for QR code generation with [qrcode](https://github.com/soldair/node-qrcode)

## Usage

```tsx
// Component
import ReactDOM from 'react-dom'
import { QRCode } from '@rxts/react-qrcode'

ReactDOM.render(<QRCode value="https://www.1stg.me" />)

// hooks
import { useQRCode } from '@rxts/react'

export const App = () => {
  const [value, setValue] = useState('https://www.1stg.me')
  const dataUrl = useQRCode(value)
  return (
    <>
      <div>dataUrl: {dataUrl}</div>
      <img src={dataUrl} />
      <input onChange={e => setValue(e.currentTarget.value)} />
    </>
  )
}
```

## Available Props

| prop                   | type (range)                                                       | default value                               |
| ---------------------- | ------------------------------------------------------------------ | ------------------------------------------- |
| `version`              | `number` (1-40)                                                    | N/A                                         |
| `errorCorrectionLevel` | `String` ('low', 'medium', 'quartile', 'high', 'L', 'M', 'Q', 'H') | `'M'`                                       |
| `maskPattern`          | `number` (0-7)                                                     | N/A                                         |
| `toSJISFunc`           | `Function`                                                         | N/A                                         |
| `margin`               | `number`                                                           | `4`                                         |
| `scale`                | `number`                                                           | `4`                                         |
| `width`                | `number`                                                           | N/A                                         |
| `color`                | `{ dark: string; light:string }`                                   | `{ dark: '#000000ff', light: '#ffffffff' }` |
| `type`                 | `string` ('image/png', 'image/jpeg', 'image/webp')                 | `'image/png'`                               |
| `quality`              | `number`(0-1)                                                      | `0.92`                                      |
| `value`                | `string | Array<{ data: string; mode?: string }>`                  | N/A                                         |

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