### Using Html5QrcodePlugin in a React Application

Source: https://github.com/scanapp-org/html5-qrcode-react/blob/main/README.md

This example demonstrates how to integrate the `Html5QrcodePlugin` component into a parent React application. It shows how to pass configuration props such as `fps`, `qrbox`, and `disableFlip`, along with a `qrCodeSuccessCallback` function to process the decoded QR code results. This setup allows for easy embedding of QR code scanning functionality.

```JSX
const App = (props) => {

    const onNewScanResult = (decodedText, decodedResult) => {
        // handle decoded results here
    };

    return (
        <div className="App">
            <Html5QrcodePlugin
                fps={10}
                qrbox={250}
                disableFlip={false}
                qrCodeSuccessCallback={onNewScanResult}
            />
        </div>
    );
};
```

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

### Including Html5-Qrcode Library in HTML

Source: https://github.com/scanapp-org/html5-qrcode-react/blob/main/README.md

This snippet demonstrates how to include the `html5-qrcode.min.js` library in an HTML file using a `<script>` tag. This is a prerequisite for using the library's functionalities in a web application, making the `Html5QrcodeScanner` class available globally.

```HTML
<script src="html5-qrcode.min.js"></script>
```

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

### Creating Html5QrcodePlugin React Component

Source: https://github.com/scanapp-org/html5-qrcode-react/blob/main/README.md

This React component, `Html5QrcodePlugin`, wraps the `html5-qrcode` library to provide a declarative way to integrate QR code scanning. It initializes `Html5QrcodeScanner` on component mount, configures it based on props (e.g., `fps`, `qrbox`, `aspectRatio`, `disableFlip`), and ensures proper cleanup of the scanner when the component unmounts. A `qrCodeSuccessCallback` prop is required to handle successful scan results.

```JSX
// file = Html5QrcodePlugin.jsx
import { Html5QrcodeScanner } from 'html5-qrcode';
import { useEffect } from 'react';

const qrcodeRegionId = "html5qr-code-full-region";

// Creates the configuration object for Html5QrcodeScanner.
const createConfig = (props) => {
    let config = {};
    if (props.fps) {
        config.fps = props.fps;
    }
    if (props.qrbox) {
        config.qrbox = props.qrbox;
    }
    if (props.aspectRatio) {
        config.aspectRatio = props.aspectRatio;
    }
    if (props.disableFlip !== undefined) {
        config.disableFlip = props.disableFlip;
    }
    return config;
};

const Html5QrcodePlugin = (props) => {

    useEffect(() => {
        // when component mounts
        const config = createConfig(props);
        const verbose = props.verbose === true;
        // Suceess callback is required.
        if (!(props.qrCodeSuccessCallback)) {
            throw "qrCodeSuccessCallback is required callback.";
        }
        const html5QrcodeScanner = new Html5QrcodeScanner(qrcodeRegionId, config, verbose);
        html5QrcodeScanner.render(props.qrCodeSuccessCallback, props.qrCodeErrorCallback);

        // cleanup function when component will unmount
        return () => {
            html5QrcodeScanner.clear().catch(error => {
                console.error("Failed to clear html5QrcodeScanner. ", error);
            });
        };
    }, []);

    return (
        <div id={qrcodeRegionId} />
    );
};

export default Html5QrcodePlugin;
```

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