How to customized the scanner style? such as new border weight or color.

[hiveryeah]

Hi JodusNodus,

One improvement suggestion, do you consider some customized methods of QR code reader? Such as the scanner style with new border weight or color; Background image with transparency;

Thank you for your time! Br. Eva

[shilangyu]

If you mean customizing the view finder there is no official way (for now). A workaround i've been using:

<>
	<QrReader
		delay={300}
		onError={console.error}
		onScan={this.onScan}
		showViewFinder={false}
	/>
	<ViewFinder />
</>

Disable default viewfinder and render my own (with z-index: 1;)

[marxlow]

I created my own class name to do this:

// index.css


// We all love border radiuses
.qr-image-wrapper section { 
  border-radius: 16px;                   
}

// To get rid of the default red box-shadow 
.qr-image-wrapper section div {
  box-shadow: unset !important;     
}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Then In wherever you are using the QrReader. 
// QrReaderContainer.js

<QrReader className="qr-image-wrapper" />

[NSNJRGL]

@marxlow thank you, i appreciated that

[AvinoamHeroicRealm]

If you mean customizing the view finder there is no official way (for now). A workaround i've been using:

<>
	<QrReader
		delay={300}
		onError={console.error}
		onScan={this.onScan}
		showViewFinder={false}
	/>
	<ViewFinder />
</>

Disable default viewfinder and render my own (with z-index: 1;)

You rock. Spent ages trying to sort this out!