Merge pull request #90 from LGLabGreg/feat-react-18-support

Feat react 18 support for ref

Author: LGLabGreg

.changeset/wicked-mangos-cry.md

@@ -0,0 +1,5 @@
+---
+'@lglab/react-qr-code': patch
+---
+
+Add ref to ReactQRCodeProps

.changeset/young-jeans-count.md

@@ -0,0 +1,5 @@
+---
+'@lglab/react-qr-code': patch
+---
+
+Use forwardRef to support React 18

package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/LGLabGreg/react-qr-code.git"
   },
-  "packageManager": "pnpm@10.2.1",
+  "packageManager": "pnpm@10.4.1",
   "type": "module",
   "scripts": {
     "dev": "pnpm concurrently --names packages,apps \"pnpm watch:packages\" \"pnpm watch:apps\"",
@@ -49,7 +49,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "typescript": "~5.7.3",
-    "typescript-eslint": "^8.24.1",
+    "typescript-eslint": "^8.25.0",
     "vite": "^6.1.1",
     "vitest": "^3.0.5"
   }

packages/react-qr-code/package.json

@@ -57,8 +57,8 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "typescript": "~5.7.3",
-    "typescript-eslint": "^8.24.1",
-    "vite": "^6.1.1",
+    "typescript-eslint": "^8.25.0",
+    "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'