Security News
38% of CISOs Fear They’re Not Moving Fast Enough on AI
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
react-instascan
Advanced tools
This library is using instascan-umd
instead of instascan
as a per-dependencie.
If you're upgrading for newer verions you must install istascan-umd
.
npm
npm install react-instascan react instascan-umd --save
yarn
yarn add react-instascan react instascan-umd
Using unpkg CDN
<script type="application/javascript" src="https://unpkg.com/react-instascan/dist/main.js"></script>
To use this library you need at least:
React Instascan exposes two Components: Cameras and Scanner.
With ESModules:
import { Cameras, Scanner } from "react-instascan";
or with CommonsJS:
const { Cameras, Scanner } = require("react-instascan");
The "Cameras" component with a render prop and will fetch for the
available cameras on your device.
The Scanner Component receives as props the camera and a VideoHTMLElement
as child element. Then it will call the onScan listener when reading a code.
Other event types are also available (check the API table):
<Cameras>
{cameras => (
<div>
<h1>Scan the code!</h1>
<Scanner camera={cameras[0]} onScan={onScan}>
<video style={{ width: 400, height: 400 }} />
</Scanner>
</div>
)}
</Cameras>
name | type | description |
---|---|---|
camera | object | Camera object returned by <Camera /> |
options | object | Same options from Instascan.Scanner |
stop | boolean | If stop is true the camera stops and vice-versa |
onScan | function | Emitted when a QR code is scanned using the camera in continuous mode |
onStart | function | Called when camera is active and scanning has started |
onStop | function | Called when camera and scanning have stopped |
onActive | function | Emitted when the scanner becomes active as the result of stop becoming false or the tab gaining focus |
onInactive | function | Emitted when the scanner becomes inactive as the result of stop becoming true or the tab losing focus |
For more details check the Instascan API
Although this project comes with a simple example, you may want to use this code directly on your code to test and fix possibly bugs. For that you can just link this package
yarn link
Go to your project root (where the package.json
of your app is) and then use the linked version:
yarn link react-instascan
Now just start the build process on watch mode and you're going to see real time changes in your project
yarn build --watch
For more information about contributing see the CONTRIBUTING guidelines
This project is under the MIT License
FAQs
A React port of the Instascan lib
The npm package react-instascan receives a total of 0 weekly downloads. As such, react-instascan popularity was classified as not popular.
We found that react-instascan demonstrated a not healthy version release cadence and project activity because the last version was released 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.
Security News
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.