bunlong / next-qrcode Goto Github PK

On github README the installation goes as, e.g., yarn add next-qrcode but on NPM is like yarn add react-qrcodes.

Why is that and which one should be used?

Detail

Upgrade both development dependencies and production dependencies.

  import { useQRCode } from 'react-qrcodes';

  const qrCode = useQRCode<HTMLImageElement>({
    text: 'https://google.com',
    options: {
      type: 'image/jpeg',
      quality: 0.3,
      level: 'M',
      margin: 3,
      scale: 4,
      width: 200,
      color: {
        dark: '#010599FF',
        light: '#FFBF60FF',
      },
    },
  });

  console.log(qrCode);

--> qrCode is always false, never an array as docs would imply is supposed to be

can't access on https://react-hook-qrcode.github.io/ and how to see it works

The level option does not exist in the npm package "qrcode - it should be errorCorrectionLevel

I have the following code:

const { Image } =  useQRCode()
  return (
    <>
    <Image text={link} />
    <p/>
    <a href={link} target="_new">{link}</a>
    </>
  )

which breaks with the following errors:

Uncaught TypeError: Cannot read properties of undefined (reading 'getContext')
at renderCanvas (browser.js?b4d5:27:1)
at eval (next-qrcode.es.js?5558:1:168)
at invokePassiveEffectCreate (react-dom.development.js?ac89:23487:1)
at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:3994:1)
at invokeGuardedCallback (react-dom.development.js?ac89:4056:1)
at flushPassiveEffectsImpl (react-dom.development.js?ac89:23574:1)
at unstable_runWithPriority (scheduler.development.js?bcd2:468:1)
at runWithPriority$1 (react-dom.development.js?ac89:11276:1)
at flushPassiveEffects (react-dom.development.js?ac89:23447:1)
at eval (react-dom.development.js?ac89:23324:1)
at workLoop (scheduler.development.js?bcd2:417:1)
at flushWork (scheduler.development.js?bcd2:390:1)
at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:157:1)

The above error occurred in the component:

at n (webpack-internal:///./node_modules/next-qrcode/dist/next-qrcode.es.js:7:138)
at eval (webpack-internal:///./pages/index.js:52:62)
at __WEBPACK_DEFAULT_EXPORT__ (webpack-internal:///./pages/_app.js:40:27)
at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20638)
at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23179)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:323:9)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:820:26)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:944:27)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
at eval (webpack-internal:///./pages/index.js:52:62)
at WEBPACK_DEFAULT_EXPORT (webpack-internal:///./pages/_app.js:40:27)

if I remove the image component from the page, the value displayed in the link is http://localhost:3000/auth?id=u5-btJ73LdoDIqwaAAAn&userId=288100 and if I hard code that value in the image:

    <Image text={'http://localhost:3000/auth?id=u5-btJ73LdoDIqwaAAAn&userId=288100'} />

the QR code shows up correctly. what am I doing wrong here?

Using the Image Render, when we right click on the image to save as, the file appears has an "Unknown" file name without file extension and no file Icon, only a blank Icon.
On MacOS, this file can be open with the built in Preview.app OS App, even with the preview on Finder.
On Windows, only open after choosing an App.

The QR code can be rendered in three different types, i.e. Canvas, SVG and Image. All three types have different available options prop parameters (as shown in the readme/documentation). However, they are all linked to the QRCodeOptions type in code which contains all props.

Issues:

• It is possible to provide non relevant props when generating a qr.
• Will need to check documentation which props are relevant for a given type.

I have a use case where i want to show the QR and i want to allow user to download that QRCode as png image which can be shared. Can we include such functionality?

Is there a way to make Micro QR codes with this?