@rpearce I have converted the project to TS, but there are still 2 things to do. Tests and Storybook are working.

1st - I wasn't sure about the types for the parentRef portalEl scrollableEl so I was going to leave that to you.

2nd - In the tsconfig.json file if you have declaration set to true, it generate the d.ts types automatically but they are not very readable in certain cases, so I thought to ask your preference and also leave to you, in case you wanted to build a more custom type file with comments, etc...

This issue is a:

• Bug report

Expected behavior

That the zoomed image would scale correctly on all platforms.

Actual behavior

On iOS, the zoomed image is scaled based on the rendered size of the unzoomed image and appears blurry.

The zooming does work as expected on desktop and Android. This issue appears to be related to iOS only.

Steps to reproduce behavior

1. Apply a constrained width to an unzoomed image (e.g. 20%)
2. View the page with an iOS device
3. Run the linked the example below in the dev server and view it with an iOS device (both Safari and Chrome for iOS exhibit the same behavior).

Link to repository/example of behavior

I have patched the example to apply a 20% width style attribute that highlights the behavior - the patch to the upstream is here

This runs with the pre-configured node dev server.

Notes

This example contains the fix from #101, so hopefully this issue is not a duplicate of that.

I had a go at trying to tweak the transform logic here:

https://github.com/rpearce/react-medium-image-zoom/blob/25d563e3e0d03eb7cc72e560e7e1e035feff2a1d/src/Zoom.js#L141

I made some improvements by adding a {zoom: 2} property and halving the scale factor. This appears to make the device render the full resolution. So the image is now clear. But the side effect is that the X,Y coordinate logic pushes the image out of the viewport.

I saw that a rewrite of the library is in progress, so I decided to first report this issue and provide a means of reproducing the symptom first.

Hi,

I've been using react-medium-image-zoom in a Gatsby project and while in development it has been working, it doesnt when you try to build your project.

 ERROR #95312 

"document" is not available during server side rendering.

See our docs page for more info on this error: https://gatsby.dev/debug-html


  68 |     overlayBgColorStart: overlayBgColorStart,
  69 |     parentRef: wrapRef,
> 70 |     portalEl: portalEl || document.body,
     | ^
  71 |     scrollableEl: scrollableEl || window,
  72 |     transitionDuration: transitionDuration,
  73 |     zoomMargin: zoomMargin,


  WebpackError: ReferenceError: document is not defined
  
  - Controlled.js:70 Controlled
    node_modules/react-medium-image-zoom/dist/esm/Controlled.js:70:1

Btw, I am using the Uncontrolled Zoom.

I found these 2 packages, that could help:

• https://github.com/alex-cory/react-useportal
• https://github.com/jesstelford/react-portal-universal

But there is another possible solution that you would need to ask the consumer to also install this package if he/she were to use react-medium-image-zoom in Gatsby https://www.gatsbyjs.org/packages/gatsby-plugin-portal/

This PR addresses issue #42.

All props are now passed down to the Zoom img component, with special cases for src, srcset, and style.

One note/question: the hasLoaded state on the Zoom component is being set in two places https://github.com/rpearce/react-medium-image-zoom/blob/master/src/react-medium-image-zoom.js#L259 https://github.com/rpearce/react-medium-image-zoom/blob/master/src/react-medium-image-zoom.js#L297

Maybe I'm missing something, but they seem to each reference a difference load event - one being the component mounting, the other being the img element loading. Is this right?

This option accepts “div” or “span” and defaults to “div”.

This pull request closes https://github.com/rpearce/react-medium-image-zoom/issues/236.

I never used Storybook. Crossing my fingers I didn’t mess things up. Standby for feedback.

Pre-Flight Checklist

I have made sure to

• [x] add tests to maintain 100% test coverage & add a Storybook example (when this makes sense)
• [x] manually test all the Storybook examples
• [x] run $ yarn build to build the project code

Fixes #30 Fixes #49

• when you pass a non-null value to isZoomed on component instantiation, the component should only zoom/unzoom when that isZoomed prop changes. This means that the consumer is in charge of when it's open or closed. Clicking on the image will not do anything. If it is a controlled component but then you do not pass isZoomed with a non-null value, then an error will be raised telling you that you must control it.
• if you do not pass true or false to isZoomed, then the component will control itself. This means that if you initially pass isZoomed={null} and then pass isZoomed={true} (or false), then it will throw an error. If it is an uncontrolled component but then you do pass isZoomed with a non-null value, then an error will be raised telling you that you must not control it.

Please help test the sh*t out of this.

cc @cbothner and @rajit

This issue is a kind of both:

• Feature request
• Question / support request

Description

Is there any possibility or example to implement a Slideshow with this package? I have tried this with a controlled component, but when I set the isZoomed property to false on one image and to true on another image, the open and close animations come into play, doesn't look very nice.

So my Question: Is there any way to open an Image Slider/Colorbox with this beautiful effect?

Expected behavior

I expected style key to work with the zoomImage prop.

e.g.

zoomImage={{
    src: `${item.imageS}`,
    style: {width: `20rem`, height: `5rem`}
}}

...makes the zoomed image 20rem wide, 5rem tall. Changing styles works perfectly for the image prop.

Actual behavior

Adding style key the zoomImage prop object has no effect.

e.g.

zoomImage={{
    src: `${item.imageS}`,
    style: {width: `20rem`, height: `5rem`}
}}

This issue is a:

• Question / support request

Description

Using next/image so far so great. But when using layout='responsive', the image's width and height are somehow set to 0. Is there any way around? https://nextjs.org/docs/api-reference/next/image#layout

After releasing patch 4.0.2 bundle size grow to 160kb I'm importing as suggested in the readme

import Zoom from 'react-medium-image-zoom';

https://bundlephobia.com/result?p=react-medium-image-zoom

any idea what's wrong and Thank you for this awesome library.

This issue is a:

• Question / support request

Description

When this library is included in a Gatsby site, it works fine in development.

However, when a production build is generated using SSR, the absence of the Element object causes the process to fail:

1:47:39 PM: failed Building static HTML for pages - 9.002s
1:47:39 PM: error Building static HTML failed
1:47:39 PM:   121 |   overlayBgColorStart: string.isRequired,
1:47:39 PM:   122 |   parentRef: object.isRequired,
1:47:39 PM: > 123 |   portalEl: instanceOf(Element).isRequired,
1:47:39 PM:       |                       ^
1:47:39 PM:   124 |   scrollableEl: oneOfType([object, instanceOf(Element), instanceOf(Window)]).isRequired,
1:47:39 PM:   125 |   transitionDuration: number.isRequired,
1:47:39 PM:   126 |   zoomMargin: number.isRequired
1:47:39 PM: 
1:47:39 PM:   WebpackError: ReferenceError: Element is not defined
1:47:39 PM:   
1:47:39 PM:   - UncontrolledActivated.js:123 Module../node_modules/react-medium-image-zoom/d    ist/esm/UncontrolledActivated.js
1:47:39 PM:     node_modules/react-medium-image-zoom/dist/esm/UncontrolledActivated.js:123:2    3
1:47:39 PM:   
1:47:39 PM:   - index.js:1 Module../node_modules/react-medium-image-zoom/dist/esm/index.js
1:47:39 PM:     node_modules/react-medium-image-zoom/dist/esm/index.js:1:1

A Gatsby-specific workaround for this is:

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-medium-image-zoom/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

But when doing so, you also lose the CSS normally imported thusly:

import 'react-medium-image-zoom/dist/styles.css';

Which breaks the zooming.

So to work around this, I added the rollup build of the CSS to the Gatsby project and imported it as if it were a local CSS file.

It seems that the offending functionality is only used in propTypes, so I was wondering whether there is an option in rollup to either

• Supply some substitute for the Element object for non-browser environments, or
• Publish a version of the library that strips out the propTypes for SSR purposes (since propTypes are generally only used during development)

Hello,

I've react project and I'm using react-app-rewired, However when I installed this package I get the following error:

SyntaxError: /path/node_modules/react-medium-image-zoom/dist/index.js: Missing class properties transform.
  329 | }
  330 | class ControlledBase extends Component {
> 331 |     static defaultProps = {
      |     ^
  332 |         a11yNameButtonUnzoom: 'Minimize image',
  333 |         a11yNameButtonZoom: 'Expand image',
  334 |         IconUnzoom: ICompress,
^[[B

I've @babel/plugin-proposal-class-properties installed, here's my babel.config.json

{
  "presets": [
    "@babel/preset-react",
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-transform-react-jsx",
    "@babel/plugin-proposal-class-properties"
  ]
}

• Feature request

Description

It would be nice if we could have a header when the image is zoomed in, not to confuse with the caption which is when the image is zoomed out. #242

I would be really nice if we could have a new prop such as ZoomWrapperComponent that lets you wrap the zoomed in images

<Zoom
...
ZoomWrapperComponent={children => {
<div>{children}</div>
}} >

or at least lets you add a component on top of the image

<Zoom
ZoomHeaderComponent={HeaderComponent}>

Thanks

This issue is a:

• Bug report

Expected behavior

I expected no flicker when the image goes back to its original size

Actual behavior

When I click to go back to a zoomed out size, there is a flicker effect

Steps to reproduce behavior

1. Click on the image
2. Click out of the image
3. Notice the flicker

Link to repository/example of behavior

See my personal portfolio

1. Go to Portfolio
2. Click on "Work"
3. Open one of the projects
4. Click on an image
5. Click again to zoom out
6. Notice the flicker

Code Snippet;

<Zoom>
<img className="work-hover-text-content-im" src={`${process.env.PUBLIC_URL}/images/test.png`}/>
</Zoom>

Technical Details

• Built with React
• Chrome & Firefox browsers

How to solve issue?

It seems that it's coming from the data-rmiz-wrap property that is set as hidden when the user clicks on the image. If I force the value to be set as visible while zoomed in, I don't get the flicker when zooming out.