Image-zoom component, how to keep rounded corners during transition?

[nktnet1]

Using the image-zoom component, I'm currently setting the tailwind class rounded-full for both the component props and inside zoomInProps:

  <ImageZoom
    src={exampleImage}
    className="border-2 rounded-full h-auto w-[220px] my-0"
    zoomInProps={{
      className: "rounded-full"
    }}
    alt="Example Image"
  />

This works for the start and end state of the image during the zoom action, but not in the transition (i.e. going from not zoomed to zoom).

Is there any other props that we can use to make the image remain rounded for the full duration? I've consulted the documentation here but couldn't get information on props or how transition is handled:

• https://fumadocs.vercel.app/docs/ui/components/image-zoom

Thank you!

[Gitstar-OC]

In the image-zoom.js file in fumadocs-ui/dist/components/image-zoom.js you can add border property

"use client";
import {
  defaultImageSizes
} from "../chunk-UOD2T27N.js";
import "../chunk-MLKGABMK.js";

// src/components/image-zoom.tsx
import Image from "next/image";
import Zoom from "react-medium-image-zoom";
import "../../dist/image-zoom.css";
import { jsx } from "react/jsx-runtime";
function getImageSrc(src) {
  if (typeof src === "string") return src;
  if ("default" in src) return src.default.src;
  return src.src;
}
function ImageZoom({
  zoomInProps,
  children,
  ...props
}) {
  return /* @__PURE__ */ jsx(
    Zoom,
    {
      zoomMargin: 20,
      wrapElement: "span",
      zoomImg: {
        src: getImageSrc(props.src),
        sizes: void 0,
        ...zoomInProps
      },
      children: children ?? /* @__PURE__ */ jsx(Image, { sizes: defaultImageSizes, ...props }), 
     // other properties you want to add 
    }
  );
}
export {
  ImageZoom
};

This will change the border while the image is zoomed.

[fuma-nama]

you can use CSS selectors, the react medium image zoom component has their own data- attributes which is supposed to use for styling

[nktnet1]

Thanks @fuma-nama - looking at this code here:

• https://github.com/rpearce/react-medium-image-zoom/blob/c8f091f40ea8adc4fe9841d476d16487c55e9a3b/stories/Img.stories.tsx#L201

It looks like we need to set the classDialog property, e.g.

          <Zoom {...props} classDialog="custom-zoom">

but at the moment, there's no way to set the classDialog property in the image-zoom component (it's ignored?):

fumadocs/packages/ui/src/components/image-zoom.tsx

Lines 28 to 38 in de85fc0

	<Zoom
	zoomMargin={20}
	wrapElement="span"
	zoomImg={{
	src: getImageSrc(props.src),
	sizes: undefined,
	...zoomInProps,
	}}
	>
	{children ?? <Image sizes={defaultImageSizes} {...props} />}
	</Zoom>

---

I can indeed confirm that by adding this to my global.css:

.custom-zoom [data-rmiz-modal-img] {
  border-radius: 9999px;
}

and hard-coding the style to fumadoc's image-zoom component:

    Zoom,
    {
      zoomMargin: 20,
      wrapElement: "span",
      zoomImg: {
        src: getImageSrc(props.src),
        sizes: void 0,
        ...zoomInProps
      },
      classDialog: 'custom-zoom',     // hard-coding this here
      children: children ?? /* @__PURE__ */ jsx(Image, { sizes: defaultImageSizes, ...props })
    }

does indeed work. Would it be possible for you to let the classDialog prop be passed through? Thank you!

[fuma-nama]

I would recommend you to clone the component from our repo and modify it (similar to Shadcn UI).

I'll fix it later.

[nktnet1]

Looks like this has been fixed in [email protected], i.e. the code below

Example style.css:

.rmiz-rounded-full-zoom [data-rmiz-modal-img] {
  border-radius: 9999px;
}

Example component.tsx:

<ImageZoom
  src={exampleImage}
  className="border-2 rounded-full h-auto w-56 my-0"
  alt="Example Image"
  rmiz={{
    classDialog: 'rmiz-rounded-full-zoom'
  }}
/>

Now works as expected. Thanks @fuma-nama and @Gitstar-OC!