How to use the useContinuousScanner

[Abe101]

I mainly want to create a custom scanner since most of your components are not customizable but with the same functionality as it has. I found this hook but I do not understand how to use it. Any example would help immensely.

[yudielcurbelo]

You could use the Scanner component to accomplish this.

<Scanner
  formats={["qr_code"]}
  onScan={(detectedCodes) => console.log(detectedCodes)}
  components={{
    finder: false,
  }}
  allowMultiple={true}
>
  <p>Custom stuff</p>
</Scanner>;

Set the finder component to false and implement your custom logic for the UI.

You could also look at the code in the Finder component, to see how it was done.

[Abe101]

But what about the hook? What is it used for? I thought I could use it to create my own scanner components

[Abe101]

You could use the Scanner component to accomplish this.

<Scanner
  formats={["qr_code"]}
  onScan={(detectedCodes) => console.log(detectedCodes)}
  components={{
    finder: false,
  }}
  allowMultiple={true}
>
  <p>Custom stuff</p>
</Scanner>;

Set the finder component to false and implement your custom logic for the UI.

You could also look at the code in the Finder component, to see how it was done.

Hi, I tried this out and it hid the the border and red svg lines but I see no way to add a custom video element?

[Abe101]

Also I tried modifying video styles using the styles prop but they didnt work

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.