React-instascan NPM

React Instascan

Port of Instascan library to React

Warning

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.

Installing

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>

Requirements

To use this library you need at least:

react >= 16
instascan-umd >= 1

Using it

Importing

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>

Scanner properties

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

Contributing

Using directly from the source

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