Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
react-weblineindia-qrcode-scanner
Advanced tools
Readme
ReactJS based QR Code Scanner component, allowing you to detect and decode QR codes.
83.0 ✔ | 77.0 ✔ | 13.1.1 ✔ | 83.0 ✔ | Not supported |
Install the npm package:
npm install react-weblineindia-qrcode-scanner
#OR
yarn add react-weblineindia-qrcode-scanner
Use the <react-weblineindia-qrcode-scanner>
component:
import React, { Component } from 'react'
import QrReader from 'react-weblineindia-qrcode-scanner'
class Test extends Component {
constructor(props){
super(props)
this.state = {
delay: 100,
result: 'No result',
}
this.handleScan = this.handleScan.bind(this)
}
handleScan(data){
this.setState({
result: data,
})
}
handleError(err){
console.error(err)
}
render(){
const previewStyle = {
height: 240,
width: 320,
}
return(
<div>
<QrReader
delay={this.state.delay}
style={previewStyle}
onError={this.handleError}
onScan={this.handleScan}
/>
<p>{this.state.result}</p>
</div>
)
}
}
For Next.js Use dynamic import instead of usual import.
import dynamic from 'next/dynamic'
const QrReader = dynamic(() => import('react-weblineindia-qrcode-scanner').then((a) => a.QrReader), {ssr: false});
Prop | Type | default | Description |
---|---|---|---|
delay | number | 500 | The delay between scans in milliseconds. To disable the interval pass in false . |
facingMode | string | Specify which camera direction should be used (if available). Options: front and rear . | |
legacyMode | boolean | false | If the device does not allow camera access (e.g. IOS Browsers, Safari) you can enable legacyMode to allow the user to take a picture (On a mobile device) or use an existing one. To trigger the image dialog just call the method openImageDialog from the parent component. Warning You must call the method from a user action (eg. click event on some element). |
maxImageSize | number | 1500 | If legacyMode is active then the image will be downscaled to the given value while keepings its aspect ratio. Allowing larger images will increase the accuracy but it will also slow down the processing time. |
style | object | Styling for the preview element. This will be a video or an img when legacymode is true . Warning The preview will keep its aspect ratio, to disable this set the CSS property objectFit to fill . | |
className | string | ClassName for the container element. | |
chooseDeviceId | function | Called when choosing which device to use for scanning. By default chooses the first video device matching facingMode , if no devices match the first video device found is choosen. |
Name | Description |
---|---|
onScan | Scan event handler. Called every scan with the decoded value or null if no QR code was found. |
onError | Function to call when an error occurs such as:- Not supported platform -The lack of available devices |
onLoad | Called when the component is ready for use. |
onImageLoad | Called when the image in legacyMode is loaded. |
We have built many other components and free resources for software development in various programming languages. Kindly click here to view our Free Resources for Software Development
Detailed changes for each release are documented in CHANGELOG.md.
react-weblineindia-qrcode-scanner is inspired by react-qr-scanner.
react-weblineindia-qrcode-scanner, qrcode, qrcode-reader, qrcode-scanner, webrtc, react-qrcode-scanner, barcode-scanner, react-barcode, reactjs-qr-code, reactjs-barcode
FAQs
ReactJS based QR Code Scanner component, allowing you to detect and decode QR codes.
The npm package react-weblineindia-qrcode-scanner receives a total of 16 weekly downloads. As such, react-weblineindia-qrcode-scanner popularity was classified as not popular.
We found that react-weblineindia-qrcode-scanner demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.