Using Controlled zoom & ZoomContent at the same time breaks

[tarngerine]

Issue Type

• Bug report
• Feature request
• Question / support request
• Other

Description

See repro in Codesandbox link: https://codesandbox.io/s/snowy-hill-ltjwwc?file=/src/App.tsx

Using Controlled with ZoomContent prop breaks the webpage that it's used in. Using them separately works fine.

After the first zoom-in, the first zoom-out breaks (no animation), and every interaction on the website thereafter is locked.

[rpearce]

That sounds rough. Thanks for the report! I'll see what I can do.

[rpearce]

This is the next issue I'm doing! Time-expectation-wise, I'll be able to look at it within the next week.

Thank you for your patience.

[rpearce]

Okay... initial finding:

Converting this

ZoomContent={(props) => <CustomZoomContent {...props} />}

to this

ZoomContent={CustomZoomContent}

works with the Controlled zoom.

However, the Uncontrolled component doesn't have this limitation. Let's see...

[rpearce]

I also was able to get it working using React.useCallback:

  const Zoom2Content = useCallback(
    (props: ControlledProps) => <CustomZoomContent {...props} />,
    []
  );

You can see that working on this CodeSandbox

[rpearce]

I think that the issue is that ={() => <Something />} creates a new instance of that component on every render, but this might not work for a reason I haven't figured out yet.

When we use Uncontrolled (the default component), it works, for (props) => <CustomZoomContent {...props} /> has only been called once, and Uncontrolled manages its own zoomed/unzoomed state.

However, with the Controlled example, if we update the parent component state, then a new instance of () => <Something /> is created and passed on every render, and the ZoomContent property seems like it can't handle that. Maybe it should?

There are some workarounds I've listed above, and this seems like a bit of a deep dive to figure out any further that I don't have time for tonight, unfortunately. G'night!

[firatciftci]

@rpearce The solution/workaround above with useCallback() works perfectly for my needs! I was struggling with this issue until I stumbled upon this thread, so I would recommend adding this as a suggested method (or a fine workaround) to the main README file. Thank you for all of your work on this!

[firatciftci]

And separately, I had to get the internal props of ZoomContent copied over from the respective node_modules type definition file to set up the useCallback()-ed custom component as such:

const enum ModalState {
  LOADED = "LOADED",
  LOADING = "LOADING",
  UNLOADED = "UNLOADED",
  UNLOADING = "UNLOADING",
}

type ZoomContentProps = {
  img: React.ReactElement | null;
  buttonUnzoom: React.ReactElement<HTMLButtonElement>;
  modalState: ModalState;
  onUnzoom: () => void;
};

const ZoomContent = useCallback(
    (props: ZoomContentProps) => <CustomZoomContent {...props} />,
    [],
);

Exposing these type definitions from the package to the user to make this a bit easier (and less copy-paste-y) would perhaps be a good idea as well.

[rpearce]

I need to fix the core issue, and if there are more types that need exporting, I'll see to that.

Thanks for your notes.

[ScreamZ]

@rpearce Any news on that

[rpearce]

@ScreamZ The issue will be closed and commented on with the fix version when it's resolved.