feat: react forward ref (#31)

* feat: foward ref * chore: changeset * Update clever-baboons-hunt.md --------- Co-authored-by: Phumrapee Limpianchop <[email protected]>
rayriffy · Oct 24, 2024 · 2f9c97b · 2f9c97b
1 parent 9dcb2aa
commit 2f9c97b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/.changeset/clever-baboons-hunt.md b/.changeset/clever-baboons-hunt.md
@@ -0,0 +1,5 @@
+---
+"@urami/react": patch
+---
+
+update image component to foward ref
diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx
@@ -1,6 +1,6 @@
 import { defaultLoader, buildSource } from '@urami/utils'
 
-import type { FunctionComponent, ImgHTMLAttributes } from 'react'
+import { forwardRef, type ImgHTMLAttributes } from 'react'
 import type { Loader } from '@urami/types'
 
 export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
@@ -10,24 +10,25 @@ export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
   loader?: Loader
 }
 
-const Image: FunctionComponent<ImageProps> = ({
+const Image = forwardRef<HTMLImageElement, ImageProps>(({
   src,
   width,
   quality = 75,
   loader = defaultLoader,
   ...rest
-}) => {
+},ref) => {
   const builtProps = buildSource(loader, src, width, quality)
 
   return (
     <img
+      ref={ref}
       src={builtProps.src}
       srcSet={builtProps.srcSet}
       decoding="async"
       loading="lazy"
       {...rest}
     />
   )
-}
+})
 
 export default Image