Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yudielcurbelo/react-qr-scanner
A library to scan QR Codes in react.
https://github.com/yudielcurbelo/react-qr-scanner
qr qr-code qrcode-reader qrcode-scanner react reactjs reader scanner typescript
Last synced: 3 months ago
JSON representation
A library to scan QR Codes in react.
- Host: GitHub
- URL: https://github.com/yudielcurbelo/react-qr-scanner
- Owner: yudielcurbelo
- License: mit
- Created: 2022-02-18T15:58:52.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-08-14T11:31:40.000Z (5 months ago)
- Last Synced: 2024-10-11T21:32:07.912Z (3 months ago)
- Topics: qr, qr-code, qrcode-reader, qrcode-scanner, react, reactjs, reader, scanner, typescript
- Language: TypeScript
- Homepage: https://yudielcurbelo.github.io/react-qr-scanner/
- Size: 58.6 MB
- Stars: 224
- Watchers: 3
- Forks: 32
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - yudielcurbelo/react-qr-scanner - A library to scan QR Codes in react. (TypeScript)
README
### Features
- Scan codes using a smartphone camera or webcam.
### Demo
Checkout the [Demo](https://yudielcurbelo.github.io/react-qr-scanner/).
### Install
```
yarn add @yudiel/react-qr-scanner
npm install @yudiel/react-qr-scanner
```
### Usage
```jsx
import { Scanner } from '@yudiel/react-qr-scanner';
const App = () => {
return console.log(result)} />;
};
```
- There is also a hook to get the available devices `useDevices`.
### Supported Formats
| 1D Barcodes | 2D Barcodes |
| ---------------- | ------------- |
| Codabar | Aztec |
| Code 39 | Data Matrix |
| Code 93 | Matrix Codes |
| Code 128 | Maxi Code |
| Databar | Micro QR Code |
| Databar Expanded | PDF 417 |
| Dx Film Edge | QR Code |
| EAN 8 | rMQR Code |
| EAN 13 | |
| ITF | |
| Linear Codes | |
| UPC A | |
| UPC E | |
### Scanner Props
| Prop | Type | Required | Description |
| --------------- | --------------------------------------------- | -------- | -------------------------------------------------------------------------------- |
| `onScan` | `(detectedCodes: IDetectedBarcode[]) => void` | Yes | Callback function that is called when one or more barcodes are detected. |
| `onError` | `(error: unknown) => void` | No | Callback function that is called when an error occurs while mounting the camera. |
| `constraints` | `MediaTrackConstraints` | No | Optional media track constraints to apply to the video stream. |
| `formats` | `BarcodeFormat[]` | No | List of barcode formats to detect. |
| `paused` | `boolean` | No | If `true`, scanning is paused. |
| `children` | `ReactNode` | No | Optional children to render inside the scanner component. |
| `components` | `IScannerComponents` | No | Custom components to use within the scanner. |
| `styles` | `IScannerStyles` | No | Custom styles to apply to the scanner and its elements. |
| `classNames` | `IScannerClassNames` | No | Custom classNames to apply to the scanner and its elements. |
| `allowMultiple` | `boolean` | No | If `true`, ignore same barcode being scanned. |
| `scanDelay` | `number` | No | Delay in milliseconds between scans. |
### Limitations
- Due to browser implementations, the camera can only be accessed over https or localhost.
- Beep sound in iOS will only work after user interaction.
- Server-side rendering won't work, so only require the component when rendering in a browser environment.
### Types
#### `BarcodeFormat`
```typescript
'aztec' |
'code_128' |
'code_39' |
'code_93' |
'codabar' |
'databar' |
'databar_expanded' |
'data_matrix' |
'dx_film_edge' |
'ean_13' |
'ean_8' |
'itf' |
'maxi_code' |
'micro_qr_code' |
'pdf417' |
'qr_code' |
'rm_qr_code' |
'upc_a' |
'upc_e' |
'linear_codes' |
'matrix_codes' |
'unknown';
```
#### `IDetectedBarcode`
```typescript
export interface IDetectedBarcode {
boundingBox: IBoundingBox;
cornerPoints: IPoint[];
format: string;
rawValue: string;
}
```
#### `IScannerComponents`
```typescript
export interface IScannerComponents {
tracker?: TrackFunction;
audio?: boolean;
onOff?: boolean;
torch?: boolean;
zoom?: boolean;
finder?: boolean;
}
```
#### `IScannerStyles`
```typescript
export interface IScannerStyles {
container?: CSSProperties;
video?: CSSProperties;
finderBorder?: number;
}
```