https://github.com/pocesar/react-use-qrcode

React hook that allows you to decode QR Code data in a webworker (through comlink) using @zxing/library with some adaptations for web workers. Performance-first, non-ui blocking code. Uses OffscreenCanvas if available
https://github.com/pocesar/react-use-qrcode

browser decoder esnext hooks-api-react mjs qrcode qrcode-reader qrcode-scanner react react-hook react-hooks reactjs typescript video zxing zxing-qrcode

Last synced: 3 months ago
JSON representation

React hook that allows you to decode QR Code data in a webworker (through comlink) using @zxing/library with some adaptations for web workers. Performance-first, non-ui blocking code. Uses OffscreenCanvas if available

• Host: GitHub
• URL: https://github.com/pocesar/react-use-qrcode
• Owner: pocesar
• License: mit
• Created: 2019-10-24T06:49:18.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2019-10-24T06:50:05.000Z (about 5 years ago)
• Last Synced: 2024-10-18T06:27:55.518Z (3 months ago)
• Topics: browser, decoder, esnext, hooks-api-react, mjs, qrcode, qrcode-reader, qrcode-scanner, react, react-hook, react-hooks, reactjs, typescript, video, zxing, zxing-qrcode
• Language: TypeScript
• Homepage:
• Size: 6.84 KB
• Stars: 8
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-use-qrcode

React hook that allows you to decode QR Code data in a webworker (through comlink) using [@zxing/library](https://github.com/zxing-js/library) with some adaptations for web workers. Performance-first, non-ui blocking code. Uses [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) if available

## Example

```tsx

import useQrcode from 'react-use-qrcode'

const App: React.FC = () => {

  const { ref, result, stop } = useQrcode({

    width: 300,

    height: 300

  })

  useEffect(() => {

    if (result) {

      stop()

    }

  }, [result, stop])

  return (

    <>

      

      
{ result ? result : null }

    >

  )

}

```


## Example

Run `npm run example` on the root then open `https://localhost` (accept the self signed certificate generated by Parcel)

## Caveats

* Need to always use a `` element and provide the ref.

* Need to always pass in a number width / height to the hook, can't use percentages or `vh`/`vw` (doesn't mean you can't stretch the `` element itself)

* Not tested on non-evergreen browsers (IE, Opera, Samsung Browser, etc)

* `webrtc-adapter` might be needed for some weird browsers

* [react-use-comlink](https://github.com/pocesar/react-use-comlink) is a peer dep, install manually

## License

MIT