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

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

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

License

This project is under the MIT License