### Install React Instascan

Source: https://context7.com/rubenspgcavalcante/react-instascan/llms.txt

Install React Instascan and its peer dependencies using npm or yarn.

```bash
# npm
npm install react-instascan react instascan-umd --save

# yarn
yarn add react-instascan react instascan-umd
```

--------------------------------

### Basic QR Code Reader with Scanner Component

Source: https://context7.com/rubenspgcavalcante/react-instascan/llms.txt

This example demonstrates a functional QR code reader using the Scanner component. It includes state management for scanning status and results, and event handlers for scan, start, stop, active, and inactive states. The camera is automatically selected and scanning starts on mount.

```jsx
import React, { useState } from "react";
import { Cameras, Scanner } from "react-instascan";

function QRCodeReader() {
  const [scanning, setScanning] = useState(true);
  const [result, setResult] = useState(null);

  const handleScan = content => {
    console.log("Scanned:", content);
    setResult(content);
  };

  const handleStart = () => console.log("Scanner started");
  const handleStop  = () => console.log("Scanner stopped");
  const handleActive   = () => console.log("Tab/scanner became active");
  const handleInactive = () => console.log("Tab/scanner became inactive");

  return (
    <div>
      <Cameras>
        {camerasOrError => {
          if (camerasOrError instanceof Error) {
            return <p>Error: {camerasOrError.message}</p>;
          }

          return (
            <Scanner
              camera={camerasOrError[0]}       // Use the first available camera
              stop={!scanning}                 // Toggle scanning
              onScan={handleScan}              // Fired when a QR code is detected
              onStart={handleStart}            // Fired when scanning starts
              onStop={handleStop}              // Fired when scanning stops
              onActive={handleActive}          // Fired when scanner becomes active
              onInactive={handleInactive}      // Fired when scanner becomes inactive
              options={{ mirror: false }}      // Passed directly to Instascan.Scanner
            >
              {/* Must be a single <video> element — receives a React ref internally */}
              <video style={{ width: 400, height: 400 }} />
            </Scanner>
          );
        }}
      </Cameras>

      <button onClick={() => setScanning(s => !s)}>
        {scanning ? "Stop" : "Start"}
      </button>

      {result && <p>Last scan: {result}</p>}
    </div>
  );
}

```

--------------------------------

### Install React Instascan with npm

Source: https://github.com/rubenspgcavalcante/react-instascan/blob/master/README.md

Use this command to install the library and its peer dependencies using npm.

```bash
npm install react-instascan react instascan-umd --save
```

--------------------------------

### Controlled Start/Stop Scanner Component

Source: https://context7.com/rubenspgcavalcante/react-instascan/llms.txt

This example shows how to control the scanner's start and stop states using the `stop` prop. The `onStart` and `onStop` callbacks are used to confirm the transitions, providing feedback on the scanner's operational status.

```jsx
import React, { Component } from "react";
import { Cameras, Scanner } from "react-instascan";

class ControlledScanner extends Component {
  state = { stop: false };

  toggle = () => this.setState(s => ({ stop: !s.stop }));

  render() {
    const { stop } = this.state;
    return (
      <div>
        <Cameras>
          {cameras => (
            <Scanner
              camera={cameras[0]}
              stop={stop}
              onStart={() => console.log("▶ Scanning started")}
              onStop={() => console.log("⏹ Scanning stopped")}
              onScan={content => console.log("QR:", content)}
            >
              <video style={{ width: 320, height: 320 }} />
            </Scanner>
          )}
        </Cameras>
        <button onClick={this.toggle}>{stop ? "Start" : "Stop"}</button>
      </div>
    );
  }
}

```

--------------------------------

### Install React Instascan with yarn

Source: https://github.com/rubenspgcavalcante/react-instascan/blob/master/README.md

Use this command to install the library and its peer dependencies using yarn.

```bash
yarn add react-instascan react instascan-umd
```

--------------------------------

### Scanner Component Usage

Source: https://context7.com/rubenspgcavalcante/react-instascan/llms.txt

Demonstrates how to use the Scanner component to read QR codes. It includes setup for cameras, event handlers for scan results, and controls for starting/stopping the scanner.

```APIDOC
## Scanner Component

`Scanner` creates and manages an `Instascan.Scanner` instance bound to a `<video>` element child. It starts the camera automatically on mount (unless `stop={true}`), attaches the provided event listeners, and cleans up all listeners and stops the scanner on unmount. Passing a new `camera` or toggling `stop` via props reactively starts or stops scanning without remounting.

### Props:

| Prop         | Type       | Required | Description                                                                                      |
|--------------|------------|----------|--------------------------------------------------------------------------------------------------|
| `camera`     | `object`   | ✅       | A camera object returned by `<Cameras>`.                                                         |
| `children`   | `node`     | ✅       | A single `<video>` element. The component attaches a React ref to it automatically.             |
| `stop`       | `bool`     |          | When `true`, stops the scanner. When changed to `false`, restarts scanning.                      |
| `onScan`     | `func`     |          | Called with the decoded QR code string when a code is scanned (continuous mode).                 |
| `onStart`    | `func`     |          | Called when the camera becomes active and scanning has started.                                  |
| `onStop`     | `func`     |          | Called when the camera and scanning have stopped.                                                |
| `onActive`   | `func`     |          | Called when the scanner becomes active (tab regains focus or `stop` becomes `false`).            |
| `onInactive` | `func`     |          | Called when the scanner becomes inactive (tab loses focus or `stop` becomes `true`).             |
| `options`    | `object`   |          | Options passed directly to `new Instascan.Scanner(opts)`. See [Instascan API](https://github.com/schmich/instascan#api). |

### Example Usage:

```jsx
import React, { useState } from "react";
import { Cameras, Scanner } from "react-instascan";

function QRCodeReader() {
  const [scanning, setScanning] = useState(true);
  const [result, setResult] = useState(null);

  const handleScan = content => {
    console.log("Scanned:", content);
    setResult(content);
  };

  const handleStart = () => console.log("Scanner started");
  const handleStop  = () => console.log("Scanner stopped");
  const handleActive   = () => console.log("Tab/scanner became active");
  const handleInactive = () => console.log("Tab/scanner became inactive");

  return (
    <div>
      <Cameras>
        {camerasOrError => {
          if (camerasOrError instanceof Error) {
            return <p>Error: {camerasOrError.message}</p>;
          }

          return (
            <Scanner
              camera={camerasOrError[0]}       // Use the first available camera
              stop={!scanning}                 // Toggle scanning
              onScan={handleScan}              // Fired when a QR code is detected
              onStart={handleStart}            // Fired when scanning starts
              onStop={handleStop}              // Fired when scanning stops
              onActive={handleActive}          // Fired when scanner becomes active
              onInactive={handleInactive}      // Fired when scanner becomes inactive
              options={{ mirror: false }}      // Passed directly to Instascan.Scanner
            >
              {/* Must be a single <video> element — receives a React ref internally */}
              <video style={{ width: 400, height: 400 }} />
            </Scanner>
          );
        }}
      </Cameras>

      <button onClick={() => setScanning(s => !s)}>
        {scanning ? "Stop" : "Start"}
      </button>

      {result && <p>Last scan: {result}</p>}
    </div>
  );
}
```
```

--------------------------------

### Build React Instascan in Watch Mode

Source: https://github.com/rubenspgcavalcante/react-instascan/blob/master/README.md

Command to start the build process in watch mode for real-time changes during development.

```bash
yarn build --watch
```

--------------------------------

### Controlled Start/Stop Pattern

Source: https://context7.com/rubenspgcavalcante/react-instascan/llms.txt

Illustrates how to control the scanner's start and stop states using the `stop` prop, allowing for pausing and resuming scanning without unmounting the component.

```APIDOC
## Controlled Start/Stop Pattern

The `stop` prop makes the scanner fully controlled. Toggle it to pause and resume scanning without unmounting the component. The `onStart` and `onStop` callbacks confirm the transition.

```jsx
import React, { Component } from "react";
import { Cameras, Scanner } from "react-instascan";

class ControlledScanner extends Component {
  state = { stop: false };

  toggle = () => this.setState(s => ({ stop: !s.stop }));

  render() {
    const { stop } = this.state;
    return (
      <div>
        <Cameras>
          {cameras => (
            <Scanner
              camera={cameras[0]}
              stop={stop}
              onStart={() => console.log("▶ Scanning started")}
              onStop={() => console.log("⏹ Scanning stopped")}
              onScan={content => console.log("QR:", content)}
            >
              <video style={{ width: 320, height: 320 }} />
            </Scanner>
          )}
        </Cameras>
        <button onClick={this.toggle}>{stop ? "Start" : "Stop"}</button>
      </div>
    );
  }
}
```
```

--------------------------------

### Configure Instascan Options in React

Source: https://context7.com/rubenspgcavalcante/react-instascan/llms.txt

This example shows how to pass custom options to the Instascan scanner using the `options` prop on the `<Scanner>` component. This allows for fine-grained control over scanning behavior like mirroring, background scanning, and scan timing.

```jsx
import React from "react";
import { Cameras, Scanner } from "react-instascan";

const scannerOptions = {
  mirror: false,          // Don't mirror the video feed
  backgroundScan: true,   // Continue scanning when tab is in background
  scanPeriod: 1,          // Scan every 1 second
  refractoryPeriod: 5000  // Minimum ms between duplicate scan events
};

function ConfiguredScanner() {
  return (
    <Cameras>
      {cameras => (
        <Scanner
          camera={cameras[0]}
          options={scannerOptions}
          onScan={content => console.log("QR content:", content)}>
          <video style={{ width: 500, height: 500 }} />
        </Scanner>
      )}
    </Cameras>
  );
}
```

--------------------------------

### Basic React Instascan Scanner Usage

Source: https://github.com/rubenspgcavalcante/react-instascan/blob/master/README.md

Example of using the Cameras and Scanner components to display a video feed and scan QR codes. The Scanner component requires a camera object and a video element.

```jsx
<Cameras>
  {cameras => (
    <div>
      <h1>Scan the code!</h1>
      <Scanner camera={cameras[0]} onScan={onScan}>
        <video style={{ width: 400, height: 400 }} />
      </Scanner>
    </div>
  )}
</Cameras>
```

--------------------------------

### Include React Instascan via unpkg CDN

Source: https://github.com/rubenspgcavalcante/react-instascan/blob/master/README.md

Include the library in your HTML file using the unpkg CDN link.

```html
<script type="application/javascript" src="https://unpkg.com/react-instascan/dist/main.js"></script>
```

--------------------------------

### Import React Instascan Components with ESModules

Source: https://github.com/rubenspgcavalcante/react-instascan/blob/master/README.md

Import the Cameras and Scanner components using ESModules syntax.

```javascript
import { Cameras, Scanner } from "react-instascan";
```

--------------------------------

### Import React Instascan Components with CommonJS

Source: https://github.com/rubenspgcavalcante/react-instascan/blob/master/README.md

Import the Cameras and Scanner components using CommonJS syntax.

```javascript
const { Cameras, Scanner } = require("react-instascan");
```

--------------------------------

### Import React Instascan Components

Source: https://context7.com/rubenspgcavalcante/react-instascan/llms.txt

Import the Cameras and Scanner components using named imports (recommended), CommonJS, or as a default import.

```javascript
// ES Modules (named imports — recommended)
import { Cameras, Scanner } from "react-instascan";

// CommonJS
const { Cameras, Scanner } = require("react-instascan");

// Default import
import ReactInstascan from "react-instascan";
const { Cameras, Scanner } = ReactInstascan;
```

--------------------------------

### Link Local React Instascan Package

Source: https://github.com/rubenspgcavalcante/react-instascan/blob/master/README.md

Commands to link a local version of react-instascan for development and testing.

```bash
yarn link
```

```bash
yarn link react-instascan
```

--------------------------------

### Handle Camera Access Errors in React Instascan

Source: https://context7.com/rubenspgcavalcante/react-instascan/llms.txt

This snippet demonstrates how to handle errors when accessing camera permissions or if no cameras are found. It uses the `Cameras` render prop to check for an `Error` object and displays an appropriate message to the user.

```jsx
import React from "react";
import { Cameras, Scanner } from "react-instascan";

function SafeScanner() {
  return (
    <Cameras>
      {camerasOrError => {
        if (camerasOrError instanceof Error) {
          // Permission denied, device not found, or other camera errors
          return (
            <div role="alert">
              <strong>Camera Error:</strong> {camerasOrError.message}
            </div>
          );
        }

        if (!camerasOrError.length) {
          return <p>No cameras detected on this device.</p>;
        }

        return (
          <Scanner
            camera={camerasOrError[0]}
            onScan={val => alert(`Scanned: ${val}`)}>
            <video style={{ width: 400, height: 400 }} />
          </Scanner>
        );
      }}
    </Cameras>
  );
}
```

--------------------------------

### Use Cameras Component to List Cameras

Source: https://context7.com/rubenspgcavalcante/react-instascan/llms.txt

The Cameras component is a render-prop component that fetches available cameras and passes them to its children function. Handle potential errors during camera access.

```jsx
import React from "react";
import { Cameras } from "react-instascan";

function CameraList() {
  return (
    <Cameras>
      {camerasOrError => {
        // The child function receives either an array of camera objects or an Error
        if (camerasOrError instanceof Error) {
          return <p>Camera access denied: {camerasOrError.message}</p>;
        }

        return (
          <ul>
            {camerasOrError.map((cam, i) => (
              <li key={i}>{cam.name}</li>
            ))}
          </ul>
        );
      }}
    </Cameras>
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.