fix: refactor ref to support react 18

Author: LGLabGreg

packages/react-qr-code/package.json

@@ -58,7 +58,7 @@
     "react-dom": "^19.0.0",
     "typescript": "~5.7.3",
     "typescript-eslint": "^8.25.0",
-    "vite": "^6.1.1",
+    "vite": "^6.2.0",
     "vite-plugin-dts": "^4.5.0"
   }
 }

packages/react-qr-code/src/react-qr-code.tsx

@@ -1,4 +1,4 @@
-import { useImperativeHandle, useRef } from 'react'
+import { forwardRef, useImperativeHandle, useRef } from 'react'
 
 import { Background } from './components/background'
 import { DataModules } from './components/data-modules'
@@ -13,13 +13,12 @@ import {
 } from './constants'
 import { useIds } from './hooks/use-ids'
 import { useQRCode } from './hooks/use-qr-code'
-import type { DownloadOptions, ReactQRCodeProps } from './types/lib'
+import type { DownloadOptions, ReactQRCodeProps, ReactQRCodeRef } from './types/lib'
 import { downloadRaster, downloadSVG } from './utils/download'
 import { excavateModules } from './utils/qr-code'
 
-const ReactQRCode = (props: ReactQRCodeProps) => {
+const ReactQRCode = forwardRef<ReactQRCodeRef, ReactQRCodeProps>((props, ref) => {
   const {
-    ref,
     value,
     size = DEFAULT_SIZE,
     level = DEFAULT_LEVEL,
@@ -125,7 +124,7 @@ const ReactQRCode = (props: ReactQRCodeProps) => {
       {image}
     </svg>
   )
-}
+})
 
 ReactQRCode.displayName = 'ReactQRCode'
 

packages/react-qr-code/src/types/lib.ts

@@ -109,7 +109,6 @@ export interface ReactQRCodeRef {
 }
 
 export interface ReactQRCodeProps {
-  ref?: React.Ref<ReactQRCodeRef>
   /**
    * The value to encode into the QR Code. An array of strings can be passed in
    * to represent multiple segments to further optimize the QR Code.