### Integrate BarcodeScanner in React

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/guide.en-US.mdx

Demonstrates the basic integration of the `BarcodeScanner` component into a React application, including the necessary polyfill for browser compatibility.

```jsx
import React from 'react'
import { BarcodeScanner } from 'react-barcode-scanner'
import 'react-barcode-scanner/polyfill'

export default () => {
  return (
    <BarcodeScanner />
  )
}
```

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

### Install react-barcode-scanner Package

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/install.en-US.mdx

Instructions for installing the `react-barcode-scanner` package using common Node.js package managers: pnpm, yarn, and npm. Choose the command corresponding to your preferred package manager.

```shell
pnpm install react-barcode-scanner
```

```shell
yarn install react-barcode-scanner
```

```shell
npm install react-barcode-scanner
```

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

### Control Torch with useTorch Hook in React

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/guide.en-US.mdx

Demonstrates how to use the `useTorch` hook with `BarcodeScanner` to programmatically control the device's torch (flashlight), including checking for torch support and toggling its state.

```jsx
import React from 'react'
import { BarcodeScanner, useTorch } from 'react-barcode-scanner'

export default () => {
  const { isTorchSupported, isTorchOn, setIsTorchOn } = useTorch()

  const onTorchSwitch = () => {
    setIsTorchOn(!isTorchOn)
  }

  return (
    <div style={{ width: '100%', height: '360px' }}>
      <BarcodeScanner />
      {isTorchSupported
        ? <button onClick={onTorchSwitch}>Switch Torch</button>
        : null}
    </div>
  )
}
```

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

### Adjust Scanning Delay for BarcodeScanner

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/guide.en-US.mdx

Illustrates how to configure the scanning delay for the `BarcodeScanner` component using the `delay` option to control scanning sensitivity, with a default of 1000ms.

```tsx
<BarcodeScanner options={{ delay: 500 }} />
```

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

### Dynamically Import BarcodeScanner in Next.js

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/guide.en-US.mdx

Explains how to dynamically import the `react-barcode-scanner` library in a Next.js application using `next/dynamic` with `ssr: false` to ensure it's only loaded on the client-side, as it relies on browser-specific Barcode Detection API.

```jsx
import dynamic from 'next/dynamic'

const BarcodeScanner = dynamic(() => {
  import('react-barcode-scanner/polyfill')
  return import('react-barcode-scanner').then(mod => mod.BarcodeScanner)
}, { ssr: false })
```

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

### Configure Barcode Formats for BarcodeScanner

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/guide.en-US.mdx

Shows how to specify supported barcode formats for the `BarcodeScanner` component using the `formats` option, allowing detection of specific barcode types like `code_128`.

```tsx
<BarcodeScanner options={{ formats: ['code_128'] }} />
```

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

### Full React Barcode Scanner Demo Application

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/demo.en-US.mdx

This comprehensive React application demonstrates the complete integration of `react-barcode-scanner`, including a custom component for barcode format selection, dynamic configuration of scan delay, pause/play functionality, and torch control. It provides a full working example of a barcode scanning interface.

```jsx
'use client'\n\nimport React, { useState, useEffect, useMemo, useCallback } from "react"\nimport { BarcodeScanner, useTorch, useStreamState } from "react-barcode-scanner"\nimport "react-barcode-scanner/polyfill"\n\nexport const BarcodeFormatSelector = ({ selected, onSelectFormats }) => {\n  const formats = [\n    'code_128',\n    'code_39',\n    'code_93',\n    'codabar',\n    'ean_13',\n    'ean_8',\n    'itf',\n    'qr_code',\n    'upc_a',\n    'upc_e'\n  ]\n  const [selectedFormats, setSelectedFormats] = useState(selected)\n\n  const toggleFormat = (format) => {\n    setSelectedFormats(prevSelected => {\n      const newSelected = prevSelected.includes(format)\n        ? prevSelected.filter(f => f !== format)\n        : [...prevSelected, format]\n      onSelectFormats(newSelected)\n      return newSelected\n    })\n  }\n\n  return (\n    <div style={{ display: 'flex', gap: '4px 8px', flexWrap: 'wrap' }}>\n      {formats.map(format => (\n        <label style={{ display: 'flex', alignItems: 'center', gap: '6px' }} key={format}>\n          <input\n            type="checkbox"\n            checked={selected.includes(format)}\n            onChange={() => toggleFormat(format)}\n          />\n          {format}\n        </label>\n      ))}\n    </div>\n  )\n}\n\nexport default () => {\n  const { isTorchSupported, setIsTorchOn } = useTorch()\n  const [formats, setFormats] = useState(['qr_code'])\n  const [delay, setDelay] = useState('500')\n  const [paused, setPaused] = useState(false)\n\n  const options = useMemo(() => ({ delay: Number(delay), formats }), [delay, formats])\n\n  const onDelayChange = (e) => {\n    const value = e.target.value.replace(/[^\\d]/g,'')\n    setDelay(value)\n  }\n\n  const onCapture = useCallback((barcodes) => {\n    if (barcodes) {\n      window.alert(barcodes.map(barcode => barcode.rawValue).join('\\n'))\n    }\n  }, [])\n\n  const onPause = () => {\n    setPaused(!paused)\n  }\n\n  return (\n    <>
      <h2>Props</h2>\n      <div style={{ display: 'flex', gap: '12px', marginTop: '12px' }}>\n        <p>options.delay:</p>\n        <input style={{ border: '1px solid #f3f3f3' }} type="text" value={delay} onChange={onDelayChange} />\n      </div>\n      <div style={{ display: 'flex', gap: '12px', marginTop: '12px' }}>\n        <p>options.formats:</p>\n        <BarcodeFormatSelector selected={formats} onSelectFormats={setFormats} />\n      </div><div style={{ display: 'flex', gap: '12px', marginTop: '12px' }}>\n        <p>options.paused:</p>\n        <button style={{ border: '1px solid rgba(27, 31, 35, 0.15)', borderRadius: '6px', padding: '2px 12px' }} onClick={onPause}>{paused ? 'Play' : 'Pause'}</button>\n      </div>\n      <h2>Result</h2>\n      <div style={{ position: "relative", width: "100%", height: "440px" }}>\n        <BarcodeScanner onCapture={onCapture} options={options} paused={paused} />\n        {isTorchSupported ? (\n          <button onClick={setIsTorchOn}>Switch Torch</button>\n        ) : null}\n      </div>\n    </>\n  )\n}
```

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

### Configure Vite for react-barcode-scanner

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/install.en-US.mdx

This configuration is recommended for Vite projects, particularly if your Vite version is lower than 5. It excludes `@preflower/barcode-detector-polyfill` from dependency optimization to prevent potential build or runtime issues.

```js
export default defineConfig({
  optimizeDeps: {
    exclude: ['@preflower/barcode-detector-polyfill']
  }
})
```

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

### Basic Usage of React Barcode Scanner Component

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/react-barcode-scanner/README.md

Demonstrates how to import and use the `BarcodeScanner` component in a React application, including the necessary polyfill for broader browser compatibility. This snippet shows a minimal setup for integrating the scanner.

```TypeScript
import { BarcodeScanner } from 'react-barcode-scanner'
import "react-barcode-scanner/polyfill"

export default () => {
  return <BarcodeScanner />
}
```

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

### Initialize VConsole in JavaScript

Source: https://github.com/preflower/react-barcode-scanner/blob/master/index.html

This snippet initializes VConsole, a lightweight, extendable front-end developer tool. By default, VConsole is exported to `window.VConsole`, allowing it to be instantiated directly. It's commonly used for debugging web applications by providing a console, network, element, and storage viewer directly in the browser.

```JavaScript
var vConsole = new window.VConsole();
```

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

### useCamera Hook API Reference

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/api.zh-CN.mdx

Defines the parameters for the `useCamera` React hook, which provides access to the HTMLVideoElement instance and allows configuration of camera media track constraints.

```APIDOC
useCamera Hook Parameters:
  ref: RefObject<HTMLVideoElement> (Required*) - HTMLVideoElement instance.
  trackConstraints: MediaTrackConstraints (Default: DEFAULT_CONSTRAINTS) - Standard MediaTrackConstraints for camera settings.
```

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

### useTorch Hook API Reference

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/api.en-US.mdx

API reference for the `useTorch` React hook, providing control over the camera's torch (flashlight) functionality, with an option to enable it by default.

```APIDOC
useTorch Hook Props:
  defaultTorchOn: Boolean
    Default: false
    Description: Enabled by default.
```

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

### useCamera Hook API Reference

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/api.en-US.mdx

API reference for the `useCamera` React hook, used to initialize and manage the camera stream, requiring an HTMLVideoElement reference and allowing custom media track constraints.

```APIDOC
useCamera Hook Props:
  ref: RefObject<HTMLVideoElement>
    Required: true
    Description: HTMLVideoElement instance.
  trackConstraints: MediaTrackConstraints
    Default: DEFAULT_CONSTRAINTS
    Description: Based on the MediaTrackConstraints standard.
```

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

### useScanning Hook API Reference

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/api.zh-CN.mdx

Defines the parameters for the `useScanning` React hook, which manages the barcode scanning process, including the video element reference and scan options like delay and supported formats.

```APIDOC
useScanning Hook Parameters:
  ref: RefObject<HTMLVideoElement> (Required*) - HTMLVideoElement instance.
  options: ScanOptions (Default: DEFAULT_OPTIONS) - Scanning configuration including delay and supported barcode formats.
```

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

### BarcodeScanner Component API Reference

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/api.en-US.mdx

API reference for the `BarcodeScanner` React component, detailing its configurable props for scan options, capture events, camera constraints, and pause functionality.

```APIDOC
BarcodeScanner Component Props:
  options: ScanOptions
    Default: DEFAULT_OPTIONS
    Description: Configuration options for the barcode scanner.
  onCapture: (barcodes: DetectedBarcode[]) => any
    Description: Callback triggered when the specified QR code is scanned.
  trackConstraints: MediaTrackConstraints
    Default: DEFAULT_CONSTRAINTS
    Description: Based on the MediaTrackConstraints standard.
  paused: Boolean
    Default: false
    Description: Set the camera to pause scanning.
```

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

### React Barcode Scanner Demo with Customizable Options

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/demo.zh-CN.mdx

This React functional component demonstrates the usage of the `BarcodeScanner` component from `react-barcode-scanner`. It showcases how to configure scan delay, select barcode formats using the `BarcodeFormatSelector`, and pause/resume scanning. It also integrates torch control if supported. Scanned barcodes trigger an alert.

```javascript
'use client'

import React, { useState, useEffect, useMemo, useCallback } from "react"
import { BarcodeScanner, useTorch, useStreamState } from "react-barcode-scanner"
import "react-barcode-scanner/polyfill"

export default () => {
  const { isTorchSupported, setIsTorchOn } = useTorch()
  const [formats, setFormats] = useState(['qr_code'])
  const [delay, setDelay] = useState('500')
  const [paused, setPaused] = useState(false)

  const options = useMemo(() => ({ delay: Number(delay), formats }), [delay, formats])

  const onDelayChange = (e) => {
    const value = e.target.value.replace(/[^\d]/g,'')
    setDelay(value)
  }

  const onCapture = useCallback((barcodes) => {
    if (barcodes) {
      window.alert(barcodes.map(barcode => barcode.rawValue).join('\n'))
    }
  }, [])

  const onPause = () => {
    setPaused(!paused)
  }

  return (
    <>
      <h2>Props</h2>
      <div style={{ display: 'flex', gap: '12px', marginTop: '12px' }}>
        <p>options.delay:</p>
        <input style={{ border: '1px solid #f3f3f3' }} type="text" value={delay} onChange={onDelayChange} />
      </div>
      <div style={{ display: 'flex', gap: '12px', marginTop: '12px' }}>
        <p>options.formats:</p>
        <BarcodeFormatSelector selected={formats} onSelectFormats={setFormats} />
      </div>
      <div style={{ display: 'flex', gap: '12px', marginTop: '12px' }}>
        <p>options.paused:</p>
        <button style={{ border: '1px solid rgba(27, 31, 35, 0.15)', borderRadius: '6px', padding: '2px 12px' }} onClick={onPause}>{paused ? 'Play' : 'Pause'}</button>
      </div>
      <h2>Result</h2>
      <div style={{ position: "relative", width: "100%", height: "440px" }}>
        <BarcodeScanner onCapture={onCapture} options={options} paused={paused} />
        {isTorchSupported ? (
          <button onClick={setIsTorchOn}>Switch Torch</button>
        ) : null}
      </div>
    </>
  )
}
```

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

### useScanning Hook API Reference

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/api.en-US.mdx

API reference for the `useScanning` React hook, which controls the barcode scanning process, requiring a video element reference and configurable scan options like delay and supported formats.

```APIDOC
useScanning Hook Props:
  ref: RefObject<HTMLVideoElement>
    Required: true
    Description: HTMLVideoElement instance.
  options: ScanOptions
    Default: DEFAULT_OPTIONS
    Description: delay: scan interval; formats: barcode format.
```

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

### useTorch Hook API Reference

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/api.zh-CN.mdx

Defines the parameters for the `useTorch` React hook, which controls the camera's flashlight (torch) functionality, allowing it to be enabled by default.

```APIDOC
useTorch Hook Parameters:
  defaultTorchOn: Boolean (Default: false) - Whether to enable the flashlight by default.
```

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

### Basic Usage of React Barcode Scanner Component

Source: https://github.com/preflower/react-barcode-scanner/blob/master/README.md

Demonstrates how to import and use the 'BarcodeScanner' component from 'react-barcode-scanner' in a React functional component, including the necessary polyfill import for wider browser support.

```tsx
import { BarcodeScanner } from 'react-barcode-scanner'
import "react-barcode-scanner/polyfill"

export default () => {
  return <BarcodeScanner />
}
```

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

### Default MediaTrackConstraints Configuration

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/api.zh-CN.mdx

Provides the default `MediaTrackConstraints` object used for configuring camera settings, specifying preferred width, height, facing mode, and advanced options.

```javascript
{
  width: { min: 640, ideal: 1280 },
  height: { min: 480, ideal: 720 },
  facingMode: {
    ideal: 'environment'
  },
  advanced: [
    { width: 1920, height: 1280 },
    { aspectRatio: 1.333 }
  ]
}
```

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

### Default ScanOptions Configuration

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/api.zh-CN.mdx

Provides the default `ScanOptions` object used for configuring barcode scanning behavior, including the scanning delay and the array of supported barcode formats.

```javascript
{
  delay: 1000,
  formats: ['qr_code']
}
```

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

### JavaScript Default ScanOptions Object

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/api.en-US.mdx

Defines the default `ScanOptions` object for barcode scanning, setting a default delay of 1000ms and `qr_code` as the initial supported format.

```javascript
{
  delay: 1000,
  formats: ['qr_code']
}
```

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

### BarcodeScanner Component API Reference

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/api.zh-CN.mdx

Defines the props available for the `BarcodeScanner` React component, used for integrating barcode scanning functionality. It includes options for scan configuration, capture events, and camera constraints.

```APIDOC
BarcodeScanner Component Props:
  options: ScanOptions (Default: DEFAULT_OPTIONS) - Configuration options for scanning.
  onCapture: (barcodes: DetectedBarcode[]) => any - Triggered when specified barcode types are detected.
  trackConstraints: MediaTrackConstraints (Default: DEFAULT_CONSTRAINTS) - Standard MediaTrackConstraints for camera settings.
  paused: Boolean (Default: false) - Sets the camera to pause scanning.
```

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

### TypeScript ScanOptions Interface Definition

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/api.en-US.mdx

TypeScript interface defining the `ScanOptions` structure, which includes optional properties for `delay` (scan interval) and `formats` (an array of supported barcode formats).

```typescript
interface ScanOptions {
  delay?: number
  formats?: string[]
}
```

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

### ScanOptions Interface Definition

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/api.zh-CN.mdx

Defines the TypeScript interface for `ScanOptions`, specifying optional properties for scanning delay and an array of supported barcode formats.

```typescript
interface ScanOptions {
  delay?: number
  formats?: string[]
}
```

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

### JavaScript Default MediaTrackConstraints Object

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/api.en-US.mdx

Defines the default `MediaTrackConstraints` object used for configuring the camera stream, specifying ideal width, height, facing mode, and advanced resolution options.

```javascript
{
  width: { min: 640, ideal: 1280 },
  height: { min: 480, ideal: 720 },
  facingMode: {
    ideal: 'environment'
  },
  advanced: [
    { width: 1920, height: 1280 },
    { aspectRatio: 1.333 }
  ]
}
```

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

### React Component for Barcode Format Selection

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/demo.zh-CN.mdx

This React functional component allows users to select multiple barcode formats from a predefined list. It manages its own state for selected formats and calls a callback function (`onSelectFormats`) when selections change, enabling parent components to react to format updates.

```javascript
export const BarcodeFormatSelector = ({ selected, onSelectFormats }) => {
  const formats = [
    'code_128',
    'code_39',
    'code_93',
    'codabar',
    'ean_13',
    'ean_8',
    'itf',
    'qr_code',
    'upc_a',
    'upc_e'
  ]
  const [selectedFormats, setSelectedFormats] = useState(selected)

  const toggleFormat = (format) => {
    setSelectedFormats(prevSelected => {
      const newSelected = prevSelected.includes(format)
        ? prevSelected.filter(f => f !== format)
        : [...prevSelected, format]
      onSelectFormats(newSelected)
      return newSelected
    })
  }

  return (
    <div style={{ display: 'flex', gap: '4px 8px', flexWrap: 'wrap' }}>
      {formats.map(format => (
        <label style={{ display: 'flex', alignItems: 'center', gap: '6px' }} key={format}>
          <input
            type="checkbox"
            checked={selected.includes(format)}
            onChange={() => toggleFormat(format)}
          />
          {format}
        </label>
      ))}
    </div>
  )
}
```

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

### useStreamState Hook Signature

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/api.zh-CN.mdx

Provides the TypeScript signature for the `useStreamState` hook, which is used to manage the `MediaStream` obtained from `useCamera`, returning the stream and a setter function.

```typescript
function useStreamState (): [MediaStream | undefined, (newState: MediaStream) => void]
```

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

### TypeScript useStreamState Hook Signature

Source: https://github.com/preflower/react-barcode-scanner/blob/master/packages/docs/pages/docs/api.en-US.mdx

TypeScript signature for the `useStreamState` hook, which provides a tuple containing the current `MediaStream` (or `undefined`) and a function to update its state.

```typescript
function useStreamState (): [MediaStream | undefined, (newState: MediaStream) => void]
```

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