IZ component for the Fumadocs developer, who use images heavily in their markdown files

[Gitstar-OC]

@fuma-nama, I was using the

<ImageZoom
      alt=''
      src=''
      className="!my-0 rounded-xl bg-fd-background"
      width="1000"
      height="1000"
      priority
    />

, and it did not worked for me when I wanted to use it for too many images as my website constains too many docs, and I have made my short own component for that,

"use client";

// This component is used to zoom images
import { ImageZoom } from "fumadocs-ui/components/image-zoom";

function IZ({ alt, src }) {
  return (
    <ImageZoom
      alt={alt}
      src={src}
      className="!my-0 rounded-xl bg-fd-background"
      width="5000"
      height="5000"
      priority
    />
  );
}

export { IZ };

I don't need to tell you what this component does but in short it takes props, just as a small component that people can use in place of this component or the normal ![ImageName](ImagePath) in mdx.

Developer can use this as

import { IZ } from "@lib/IZ"; 
// importing it from the folder, which if you merge it will be 
import { IZ } from "fumadocs-ui/components/image-zoom";

<IZ alt="Alternate text" src="Source of the image ( in public directory )" />

It is just that simple to use as I did not understand what the below component did

import { ImageZoom } from 'fumadocs-ui/components/image-zoom';
 
const components = {
  img: (props) => <ImageZoom {...props} />,
};

If you use this you can just provide developer with two option if you don't want to provide zooming options you can use this

![alt](imagesource)

if you want to use next js fast rendering with zomming available for people, you can use this

import { IZ } from "fumadocs-ui/components/image-zoom";
<IZ alt="alternate text" src=" path of image" />

And for the developers who were using normal images in the past and want to allow zoom, they can find them selves the solution or can use this

const fs = require('fs');
const path = require('path');

// Define the root directory containing the MDX files
const docsFolder = './docs';

// Function to replace markdown image tags with <IZ> components
const replaceImageTags = (content) => {
  return content.replace(/!\[(.*?)\]\((.*?)\)/g, (match, altText, imagePath) => {
    // Convert markdown image tag to JSX IZ component
    return `<IZ alt="${altText}" src="${imagePath}" />`;
  });
};

// Function to process each .mdx file
const processFile = (filePath) => {
  fs.readFile(filePath, 'utf8', (err, data) => {
    if (err) {
      console.error(`Error reading file ${filePath}:`, err);
      return;
    }

    // Replace markdown image tags with IZ components
    const updatedContent = replaceImageTags(data);

    // Write the updated content back to the file
    fs.writeFile(filePath, updatedContent, 'utf8', (err) => {
      if (err) {
        console.error(`Error writing to file ${filePath}:`, err);
      } else {
        console.log(`Updated image tags in file: ${filePath}`);
      }
    });
  });
};

// Function to recursively process all .mdx files in a folder
const processFolder = (folderPath) => {
  fs.readdir(folderPath, (err, files) => {
    if (err) {
      console.error(`Error reading the folder ${folderPath}:`, err);
      return;
    }

    // Loop through each item in the folder
    files.forEach((file) => {
      const fullPath = path.join(folderPath, file);

      // Check if the item is a directory or file
      fs.stat(fullPath, (err, stats) => {
        if (err) {
          console.error(`Error getting stats of file ${fullPath}:`, err);
          return;
        }

        if (stats.isDirectory()) {
          // If it's a directory, recursively process the folder
          processFolder(fullPath);
        } else if (path.extname(file) === '.mdx') {
          // If it's an MDX file, process it
          processFile(fullPath);
        }
      });
    });
  });
};

// Start processing the docs folder
processFolder(docsFolder);

If you add this component thanks (no problem if you don't), I will be contributing more things in the future for this amazing docs, if you need any help or want to ask my opinion upon any component ideas or things you can message me.

Happy Coding

[fuma-nama]

and it did not worked for me when I wanted to use it for too many images as my website constains too many docs

Sounds like a XY problem, you should just ask for “how to use” instead of an alternative component

[Gitstar-OC]

Great, let me try it, I will close the discussion if it works

[Gitstar-OC]

See

import { ImageZoom } from 'fumadocs-ui/components/image-zoom';
 
const components = {
  img: (props) => <ImageZoom {...props} />,
};

I have added it in the docs/[slug]/page.tsx just like this but it is not working is there any modifications that I have to do with this lines

{/* <MDX components={{ ...defaultMdxComponents }} /> */}
        <MDX components={{...defaultMdxComponents} } />

?

[fuma-nama]

Adding the component to MDX components field is exactly what “add MDX component” means

Hmm guess I have to explain how MDX works.
MDX files are compiled into a file exporting a server component, it accepts a components prop to render JSX elements like a and img as a custom React component.
the MDX component is the exported server component, adding MDX component means passing it to the components field.

Some other ways, e.g. MDX React integration may use a different way to pass MDX components. My explanation above is how you do this in Fumadocs MDX

[Skreeauk]

See

import { ImageZoom } from 'fumadocs-ui/components/image-zoom';
 
const components = {
  img: (props) => <ImageZoom {...props} />,
};

I have added it in the docs/[slug]/page.tsx just like this but it is not working is there any modifications that I have to do with this lines

{/* <MDX components={{ ...defaultMdxComponents }} /> */}
        <MDX components={{...defaultMdxComponents} } />

?

Pass in your mdx component like this

defaultMdxComponent doesn't use ImageZoom by default

[fuma-nama]

Correct, on the docs, we grouped the default MDX components under the "MDX" folder. Thanks for your clarification;)

[Gitstar-OC]

Thanks, it is working now. It was not that clear in the docs. Thanks @Skreeauk.

[Gitstar-OC]

See I am using that whole thing but there is one issue that did not come insto my vision in the development but when I pushed it for deployment,

<MDX
          components={{
            ...defaultMdxComponents,
            Steps,
            Step,
            Tabs,
            Tab,
            Accordions,
            Accordion,
            img: (props: { src: string; alt?: string }) => {
              console.log("Image props:", props); // Log props for debugging
              const { src, alt = "Image description", ...rest } = props;
            
              if (!src) {
                console.error("Image source is missing!");
                return null;
              }
            
              return <ImageZoom src={src} alt={alt}  />;
            }
            }}
        />

It shows that it is failing to compile it, it has occured 5 times, I have tried changing all the formats and checking what props are getting passed down, but the issue is still as it is, also it cannot be identified in the development server.

Failed to compile.
./app/docs/[[...slug]]/page.tsx:75:30
Type error: Type '{ ref?: LegacyRef<HTMLImageElement> | undefined; key?: Key | null | undefined; alt?: string | undefined; crossOrigin?: CrossOrigin; ... 285 more ...; onTransitionStartCapture?: TransitionEventHandler<...> | undefined; }' is not assignable to type '{ src: string | StaticImport; alt: string; width?: number | `${number}` | undefined; height?: number | `${number}` | undefined; fill?: boolean | undefined; loader?: ImageLoader | undefined; ... 12 more ...; lazyRoot?: string | undefined; }'.
  Types of property 'src' are incompatible.
    Type 'string | undefined' is not assignable to type 'string | StaticImport'.
      Type 'undefined' is not assignable to type 'string | StaticImport'.
  73 |             Accordions,
  74 |             Accordion,
> 75 |             img: (props) => <ImageZoom {...props} />,
     |                              ^
  76 |           }}
  77 |         />
  78 |       </DocsBody>
Error: Command "npm run build" exited with 1

See, this is the error.

And the props are in the following way

Image props: {
  alt: 'USL11',
  placeholder: 'blur',
  src: {
    src: '/_next/static/media/USL1.11.f2770ecc.png',
    width: 1678,
    height: 863,
    blurDataURL: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAAZElEQVR42jWM2w7CIBQE+f/PJBqpIIZSrtIznpq4yWbmYbNGRPCviL3d8f7Jwzml/7W1hjmr53M4cgqUnCilKistD+QUjKzBmpU9RfYYeAcdHoU5Fte7QXNJ7528bSRrmer/fAGe3XtprhLFFAAAAABJRU5ErkJggg==',
    blurWidth: 8,
    blurHeight: 4
  }
}

What the issue could be ? 
Image props: {
  alt: 'USL1',
  placeholder: 'blur',
  src: {
    src: '/_next/static/media/USL2.1.c8fdb2ad.png',
    width: 1819,
    height: 885,
    blurDataURL: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAAXklEQVR42jWMSQrEIBBFvf8NG7UXouBEi7ERyeYlJcnbFPUn1XunlII2ho/5orXBWssYA0HlnEkpcRyD/zr5tYZo7b5zTlSMEe/9bqy1tumco9aKrCse5BEjhLCDLxf61Hkts0+nhAAAAABJRU5ErkJggg==',
    blurWidth: 8,
    blurHeight: 4
  }
}

[fuma-nama]

Just add img: props => <ImageZoom {...props as any} />, JSX props don't extend React's ref prop and Next.js Image's src prop

[fuma-nama]

Will work on the docs later, working hard on Fumadocs CLI

[Gitstar-OC]

Great, I will not disturb you now, just tell me if you need any help in the cli thing, I can learn it and be of some help. Good Luck!!