UI: Expose more props to Image Zoom

.changeset/neat-needles-drop.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Expose more props to Image Zoom

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)} />,
+  }}
+/>;
 ```

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,