npmpackage.info

Gathering detailed insights and metrics for modern-react-qr-reader

Other packages similar to modern-react-qr-reader

react-qr-reader

3.0.0-beta-1

A React Component for reading QR codes from the webcam

@types/react-qr-reader

2.1.7

TypeScript definitions for react-qr-reader

@blackbox-vision/react-qr-reader

5.0.0

A React Component for reading QR codes from the webcam

react-qr-code

2.0.15

A QR code generator for React and React Native.

Gathering detailed insights and metrics for modern-react-qr-reader

modern-react-qr-reader

An easy to implement drop in React Component for QR Code Scanning using mobile phones.

1.0.12

MIT

JavaScript

490,609 1.7

Installations

npm install modern-react-qr-reader

Pull Requests

Open

1

Total

2

Closed

0

Merged

1

Issues

Open

12

Total

17

Closed

5

Releases

Unable to fetch releases

Developer

KhaosArbiter

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

No

Node Version

14.15.4

NPM Version

7.5.2 Statistics

24 Stars

22 Commits

13 Forks

4 Watching

1 Branches

2 Contributors

Updated on 25 Sept 2024

Languages

JavaScript (100%)

Total Downloads

Cumulative downloads

Total Downloads

490,609

Last day

-7.1%

526

Compared to previous day

Last week

-18.7%

3,213

Compared to previous week

Last month

-7.7%

15,105

Compared to previous month

Last year

14.6%

185,405

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

Introduction

A React component for reading QR codes from the webcam. It uses the WebRTC standards for reading webcam data and jsQR is used for detecting QR codes in that data. To optimise the speed and experience, a web-worker is used to offload the heavy QR code algorithm on a separate process. The web worker is inlined and loaded on creation of the component.

A Note about the JodusNodus Repo

This repositorys goal is to be an updated version of the project at https://github.com/JodusNodus/react-qr-reader. That project appears dead, yet it still seems to generate a lot of traffic and interest. Rather than let it die, I have moved the codebase to here and welcome anyone who made pull requests to the original to do so here, and let's get this project back up and running with the fixes that it needs.

Demo

Note: This demo link will be removed or updated once this project has split sufficiently from the original codebase at https://github.com/JodusNodus/react-qr-reader

https://jodusnodus.github.io/react-qr-reader

Known Issues

Server side rendering won't work so only require the component when rendering in a browser environment.
Due to browser implementations the camera can only be accessed over https or localhost.
In Firefox a prompt will be shown to the user asking which camera to use, so facingMode will not affect it.
On IOS 11 it is only supported on Safari and not on Chrome or Firefox due to Apple making the API not available to 3rd party browsers.

Install

npm install --save modern-react-qr-reader

Example

1import React, { Component } from 'react'
2import QrReader from 'modern-react-qr-reader'
3
4class Test extends Component {
5  constructor(props) {
6        super(props);
7
8        this.state = {
9            result: 'No result'
10        }
11
12        this.handleError = this.handleError.bind(this);
13        this.handleScan = this.handleScan.bind(this);
14    }
15
16  handleScan = data => {
17    if (data) {
18      this.state.result = data;
19        console.log(this.state.result);
20        this.setState({result: data});
21    }
22  }
23  
24  handleError = err => {
25    console.error(err)
26  }
27  
28  render() {
29    return (
30      <div>
31        <QrReader
32          delay={300}
33          facingMode={"environment"}
34          onError={this.handleError}
35          onScan={this.handleScan}
36          style={{ width: '100%' }}
37        />
38        <p>{this.state.result}</p>
39      </div>
40    )
41  }
42}
43

Props

Events

Prop	Argument	Description
onScan	`result`	Scan event handler. Called every scan with the decoded value or `null` if no QR code was found.
onError	`Error`	Called when an error occurs.
onLoad	`object`	Called when the component is ready for use. Object properties are `mirrorVideo`: boolean, `streamLabel`: string
onImageLoad	img onLoad event	Called when the image in legacyMode is loaded.

Options

Prop	Type	Default	Description
delay	number or `false`	`500`	The delay between scans in milliseconds. To disable the interval pass in `false`.
facingMode	`user` or `environment`	`environment`	Specify which camera should be used (if available).
resolution	number	`600`	The resolution of the video (or image in legacyMode). Larger resolution will increase the accuracy but it will also slow down the processing time.
style	a valid React style	none	Styling for the container element. Warning The preview will always keep its 1:1 aspect ratio.
className	string	none	ClassName for the container element.
showViewFinder	boolean	`true`	Show or hide the build in view finder. See demo
constraints	object	`null`	Use custom camera constraints that the override default behavior. MediaTrackConstraints
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).

Dev

Install dependencies

npm install

Build

npm run build

Demo

npm run storybook

Linting

npm run lint

Tested platforms

Chrome macOs & Android
Firefox macOs & Android
Safari macOs & IOS

License

The MIT License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

101 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2
Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-xf5p-87ch-gxw2
Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-hxm2-r34f-qmc5
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m / GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-884p-74jh-xrg2
Warn: Project is vulnerable to: GHSA-j7fq-p9q7-5wfv
Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
Warn: Project is vulnerable to: GHSA-46c4-8wrp-j99v
Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp

Score

1.7

/10

Last Scanned on 2024-11-25

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to modern-react-qr-reader

Other packages similar to modern-react-qr-reader

modern-react-qr-reader

Installations

Pull Requests

1

2

0

1

Issues

12

17

5

Releases

Unable to fetch releases

Developer

KhaosArbiter

Developer Guide

CommonJS

No

14.15.4

7.5.2

Statistics

Languages

Total Downloads

490,609

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Introduction

A Note about the JodusNodus Repo

Demo

Known Issues

Install

Example

Props

Events

Options

Dev

Install dependencies

Build

Demo

Linting

Tested platforms

License

10

10

0

0

0

0

0

0

0

0

1.7

/10