'How to implement Barcode scanner in react js website

Can anyone tell me how to integrate a barcode scanner with react js website.when I click scan button it must scan the barcode using camera and display the details.



Solution 1:[1]

[react-qr-barcode-scanner][1]

To quote their usage

import React from "react";
import BarcodeScannerComponent from "react-qr-barcode-scanner";

function App() {
  const [data, setData] = React.useState("Not Found");

  return (
    <>
      <BarcodeScannerComponent
        width={500}
        height={500}
        onUpdate={(err, result) => {
          if (result) setData(result.text);
          else setData("Not Found");
        }}
      />
      <p>{data}</p>
    </>
  );
}

export default App;

If it scans a qr code, the data can be accessed with result.text in the supplied function to onUpdate [1]: https://www.npmjs.com/package/react-qr-barcode-scanner

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Eric Webb