Full example source code please

[thoffmann-fms]

Page https://rpearce.github.io/react-medium-image-zoom/?path=/story/img--regular looks very useful since it uses separate buttons to do variable zooming, but I can't seem to reverse engineer exactly how this is done. Could someone post the React source for this please?

[rpearce]

Hi, @thoffmann-fms! I'm the author and maintainer of this open source, BSD-3-license library.

I'm not quite sure I understand your question, so can you help me so I can help you?

Are you asking for help on how to use this library in your code, or are you asking how to copy and paste the source code and use that?

In either case, I recommend including attribution via the LICENSE file in the project.

[thoffmann-fms]

Hello, thanks for responding. I would like to see the React source specifically for the URL above. It looks very useful, but I can't reverse engineer what the various props, events, listeners, etc. would be by reading the resulting JS via browser Dev Tools.

[rpearce]

@thoffmann-fms, are you interested in "reverse engineering" this for learning / academic purposes? If you're looking to copy the code without proper attribution, I believe that would be in violation of react-medium-image-zoom's LICENSE.

If you are interested in simply browsing the source code, you can do so here:

• Project source: https://github.com/rpearce/react-medium-image-zoom/tree/main/source
• Example source:

  react-medium-image-zoom/stories/Img.stories.tsx

  Lines 38 to 52 in 16ebc24

  	export const Regular: ComponentStory<typeof Zoom> = (props) => (
  	<main aria-label="Story">
  	<h1>Zooming a regular image</h1>
  	<div className="mw-600">
  	<Zoom {...props}>
  	<img
  	alt={imgThatWanakaTree.alt}
  	src={imgThatWanakaTree.src}
  	height="320"
  	loading="lazy"
  	/>
  	</Zoom>
  	</div>
  	</main>
  	)

Additionally, if you are merely curious about the techniques used here, I can try to answer any questions you may have.

[thoffmann-fms]

I'm looking only for the details on the samples of how to use it, specifically the buttons that zoom in/out a few % at a time. The snippet you provided above shows how to wrap an area, but I don't understand how to change the zoom in/out level in a stepped mode. Also, I note that clicking those zoom buttons zoom more than just the wrapped area but the entire

block so somethings\ is pointing at more than just the image to zoom and in my case, I want only the image to change not any of the text above/below it to be affected.

[rpearce]

If you're using version 5.1.2, you should only wrap the <Zoom> around a single image element.

The Basic Usage section in the README should cover exactly how to use this component. Can you give that a read and see if that makes sense and solves your problem?