Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nixjs/qrcode-react
A React component to generate QRCode.
https://github.com/nixjs/qrcode-react
javascript qrcode qrcode-generator qrcode-react react typescript web
Last synced: 1 day ago
JSON representation
A React component to generate QRCode.
- Host: GitHub
- URL: https://github.com/nixjs/qrcode-react
- Owner: nixjs
- Created: 2022-10-31T07:44:00.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2022-10-31T08:29:27.000Z (about 2 years ago)
- Last Synced: 2025-01-02T12:18:42.346Z (20 days ago)
- Topics: javascript, qrcode, qrcode-generator, qrcode-react, react, typescript, web
- Language: TypeScript
- Homepage:
- Size: 4.88 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @nixjs23n6/qrcode-react
A React component to generate QRCode.
## Install
```typescript
yarn add @nixjs23n6/qrcode-react
```
## Interface
```typescript
export interface QRCodePropArg {
value: string
ecLevel?: 'L' | 'M' | 'Q' | 'H'
enableCORS?: boolean
size?: number
margin?: number
bgColor?: string
fgColor?: string
qrStyle?: 'squares' | 'dots'
imageSettings?: ImageSettings
className?: string
}
export interface ImageSettings {
image?: string
opacity?: number
height?: number
width?: number
}
```
### `value`
The value of the QR code. **[Required]**
### `ecLevel`
QR codes support four levels of error correction to enable recovery of missing, misread, or obscured data. Greater redundancy is achieved at the cost of being able to store less data. Know more, [wikipedia: QR_code](https://en.wikipedia.org/wiki/QR_code#Error_correction).
Possible levels are shown below:
| Level | Error resistance |
|------------------|:----------------:|
| **L** (Low) | **~7%** |
| **M** (Medium) | **~15%** |
| **Q** (Quartile) | **~25%** |
| **H** (High) | **~30%** |
**Default**: `M`
### `enableCORS`
Allowing cross-origin use of images and canvas.**Default**: `false`
### `size`
Image size.**Default**: `125`
### `margin`
The width of the white border around the data portion of the code.**Default**: `15`
### `bgColor`
The background color of QRcode.**Default**: `#FFFFFF`
### `fgColor`
The foreground color of QRcode.**Default**: `#000000`
### `qrStyle`
Style QRcode: `'squares' | 'dots'`.**Default**: `squares`
### `imageSettings`
Allow user to add logo on QRcode.**Default**: `{ opacity: 1, height: 30, width: 30, image: '' }`
```typescript
export interface ImageSettings {
image?: string
opacity?: number
height?: number
width?: number
}
```
#### `ImageSettings.image`
Logo Image Path or Base64 encoded image.
#### `ImageSettings.opacity`
Set opacity for logo.
#### `ImageSettings.height`
fixed logo height.
#### `ImageSettings.width`
Fixed logo width.
### `className`
Additional CSS class names to add to the container.
## Example
```typescript
import { QRCode } from "@nixjs23n6/qrcode-react"
export const Render = () =>
```