✨ feat: add custom qr code scanner

[kyrregjerstad]

Overview

This PR introduces the CustomScanner component to the codebase. The purpose of this component is to provide QR code scanning functionality using the html5-qrcode library.

The component accepts all the props defined in the library and and extra debug option for enabling a debug overlay.

Changes

• Added the html5-qrcode dependency
• Added the ./components/qrCodeScanner directory.
• Added qrCodeScanner.tsx.
• Added useQrCodeScanner.ts custom hook.
• Added qrCodeScannerDebugInfo.tsx component for debugging purposes.
• Added types in ./qrCodeScanner/types.ts to include props for the new component.
• Added LoadingSpinner UI component for loading state.

How to Use

You can test the component by importing it into an existing page and providing it with the necessary props. For instance:

<QrCodeScanner
  fps={10}
  onQrCodeScanSuccess={(data) => {
    // callback function goes here
    console.log(data);
  }}
  onQrCodeScanError={(error) => {
    console.log(error);
  }}
/>

Todo

• [ ] option for switching cameras
• [ ] torch toggle
• [ ] setup tests with Jest

Any other feedback is appreciated!