Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
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
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.