From 4cb74d5acdf6bf4d1e5913247113f4b139701431 Mon Sep 17 00:00:00 2001
From: fuma-nama <god63820869@gmail.com>
Date: Thu, 12 Sep 2024 16:38:05 +0800
Subject: [PATCH] UI: Expose more props to Image Zoom

---
 .changeset/neat-needles-drop.md                  |  5 +++++
 .../content/docs/ui/components/image-zoom.mdx    | 16 ++++++++++------
 packages/ui/src/components/image-zoom.tsx        |  9 ++++++++-
 3 files changed, 23 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/neat-needles-drop.md

diff --git a/.changeset/neat-needles-drop.md b/.changeset/neat-needles-drop.md
new file mode 100644
index 000000000..6f02255b5
--- /dev/null
+++ b/.changeset/neat-needles-drop.md
@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Expose more props to Image Zoom
diff --git a/apps/docs/content/docs/ui/components/image-zoom.mdx b/apps/docs/content/docs/ui/components/image-zoom.mdx
index 834ec62e9..36a590e29 100644
--- a/apps/docs/content/docs/ui/components/image-zoom.mdx
+++ b/apps/docs/content/docs/ui/components/image-zoom.mdx
@@ -1,19 +1,23 @@
 ---
-title: Zoom Image
+title: Zoomable Image
 description: Allow zoom-in images in your documentation
 preview: zoom-image
 ---
 
 ## Usage
 
-Add it to your MDX components.
+Replace `img` with `ImageZoom` in your MDX components.
 
 > A default `sizes` property will be defined if not specified
 
-```tsx
+```tsx title="page.tsx"
 import { ImageZoom } from 'fumadocs-ui/components/image-zoom';
+import defaultMdxComponents from 'fumadocs-ui/mdx';
 
-const components = {
-  img: (props) => <ImageZoom {...props} />,
-};
+<MDX
+  components={{
+    ...defaultMdxComponents,
+    img: (props) => <ImageZoom {...(props as any)} />,
+  }}
+/>;
 ```
diff --git a/packages/ui/src/components/image-zoom.tsx b/packages/ui/src/components/image-zoom.tsx
index a1a92a170..d0ca67b67 100644
--- a/packages/ui/src/components/image-zoom.tsx
+++ b/packages/ui/src/components/image-zoom.tsx
@@ -2,7 +2,7 @@
 
 import Image, { type ImageProps } from 'next/image';
 import { type ImgHTMLAttributes } from 'react';
-import Zoom from 'react-medium-image-zoom';
+import Zoom, { type UncontrolledProps } from 'react-medium-image-zoom';
 import { defaultImageSizes } from '@/utils/shared';
 import '../../dist/image-zoom.css';
 
@@ -11,6 +11,11 @@ export type ImageZoomProps = ImageProps & {
    * Image props when zoom in
    */
   zoomInProps?: ImgHTMLAttributes<HTMLImageElement>;
+
+  /**
+   * Props for `react-medium-image-zoom`
+   */
+  rmiz?: UncontrolledProps;
 };
 
 function getImageSrc(src: ImageProps['src']): string {
@@ -22,12 +27,14 @@ function getImageSrc(src: ImageProps['src']): string {
 export function ImageZoom({
   zoomInProps,
   children,
+  rmiz,
   ...props
 }: ImageZoomProps): React.ReactElement {
   return (
     <Zoom
       zoomMargin={20}
       wrapElement="span"
+      {...rmiz}
       zoomImg={{
         src: getImageSrc(props.src),
         sizes: undefined,