Zoom & Rotate Images in React: A Step-by-Step Guide

Updated 14 November 2026 · Standard formula, shown below

This guide shows you how to add zoom and rotate controls to an image in a React application, giving users the ability to inspect details or adjust orientation. You’ll build a reusable component that handles both features with simple buttons and state, no external libraries required. By the end, you’ll have a fully functional image viewer that you can drop into any project.

What You’ll Need

A React project set up (using Create React App, Vite, or any other bundler).
Basic familiarity with React hooks (useState) and event handling.
An image file or URL to test with.

Step-by-Step

Create a new component file. For example, ImageZoomRotate.js. This will keep your code organized and reusable.
Set up state for zoom and rotation. Use the useState hook to store two numbers: zoom (starting at 1, meaning 100%) and rotation (starting at 0 degrees).
Import the image. If the image is local, import it at the top of the file (e.g., import myImage from './image.jpg'). If it’s from a URL, you can store the URL in a variable.
Render the image with inline styles. Apply the zoom and rotation using the CSS transform property. The style object should look like: { transform: `scale(${zoom}) rotate(${rotation}deg)` }. This combines both effects in one line.
Add zoom buttons. Create two buttons: one for zoom in and one for zoom out. Each button should call a function that updates the zoom state. For example, onClick={() => setZoom(zoom + 0.1)} for zoom in, and setZoom(zoom - 0.1) for zoom out. Consider setting a minimum zoom (e.g., 0.5) and a maximum (e.g., 3) to keep the image usable.
Add rotate buttons. Similarly, create two buttons for rotating left and right. Rotate left would be setRotation(rotation - 90) and rotate right setRotation(rotation + 90). Using 90-degree increments is common, but you can use any value.
Wrap the image in a container with overflow hidden. This prevents the zoomed image from spilling out of its layout box. Set the container’s width and height to a fixed size (e.g., 400px) and add overflow: hidden.
Style the buttons and container. Add some basic CSS to make the buttons look like controls (e.g., positioned below the image, with padding and margins). You can use inline styles or a separate CSS file.
Test the component. Run your app and click the buttons to verify both zoom and rotation work together. Note that rotating an image changes its aspect ratio, so you may need to adjust the container size or the image’s max-width to avoid clipping unexpectedly.

Common Mistakes

Forgetting to combine transforms. If you apply scale and rotate as separate style properties, only the last one will take effect. Always combine them in a single transform string.
Not setting a container with overflow hidden. Without it, the zoomed image will expand the page layout or cause horizontal scrolling.
Using string concatenation incorrectly. Make sure the transform template literal uses backticks, not single quotes: `scale(${zoom}) rotate(${rotation}deg)`.
Ignoring the rotation origin. By default, the image rotates around its center, which is usually what you want. But if you need a different pivot point, you must set transformOrigin (e.g., ‘top left’).
Not resetting state when switching images. If your component receives a new image via props, you should reset zoom and rotation using a useEffect that depends on the image URL.

Tips

Use smooth transitions. Add transition: 'transform 0.3s ease' to the image style to make zoom and rotate feel fluid instead of jumpy.
Provide a reset button. A simple button that sets zoom back to 1 and rotation back to 0 is very user-friendly.
Consider mouse wheel zoom. You can attach an onWheel handler to the container to zoom in/out with the scroll wheel, adjusting the zoom factor by event.deltaY.
Use percentage-based zoom steps. Instead of fixed 0.1 increments, multiply the current zoom by a factor (e.g., setZoom(zoom * 1.2)) for a more natural feel.
Accessibility. Add aria-label to the buttons (e.g., “Zoom in”, “Rotate left”) so screen readers can announce them.

Troubleshooting

Image not zooming or rotating at all. Check that the transform property is applied to the img element itself, not the container. Also verify that the state updates are happening (you can log the values to the console).
Image jumps or flickers. This usually happens when the image re-renders and loses its transform. Make sure you’re not resetting the state unintentionally (e.g., in a useEffect without proper dependencies).
Rotation cuts off the image. When an image is rotated 90 degrees, its width and height swap. If your container has a fixed size, the image may be clipped. Try setting the container to a square or using max-width: 100% and max-height: 100% on the image, or adjust the container size dynamically based on rotation.
Zoom goes too far or not enough. Add min and max constraints in your zoom functions. For example, if (zoom < 0.5) return; before calling setZoom.
Buttons don't respond. Ensure the buttons are inside the component and not covered by another element with a higher z-index. Also, check that the onClick handlers are correctly bound.

Frequently Asked Questions

Can I use this with a background image?

Yes, apply the same transform style to the div that has the background image, but note that scaling a background image may require adjusting background-size to cover the container.

How do I make the zoom centered on the mouse cursor?

That requires more complex logic: track the mouse position relative to the image, calculate the new transform origin, and adjust the translation. Libraries like react-zoom-pan-pinch handle this, but for simple button-based zoom, the default center zoom is fine.

Is it better to use a library like `react-image-zoom`?

For basic zoom and rotate, a custom component is lightweight and sufficient. Libraries offer advanced features like panning, pinch gestures, and smooth animations, so consider them if you need those.

How do I persist the zoom and rotation state?

You can lift the state up to a parent component, or use context, or store it in a state management solution like Redux. For a simple component, keeping local state is fine.

Can I allow users to zoom with a slider instead of buttons?

Absolutely. Replace the buttons with an input type="range" that sets the zoom value directly. The same principle applies—just update the state on change.

Why does my image look blurry when zoomed in?

That's normal because you're scaling up a raster image. To minimize blurriness, use a high-resolution source image. For vector images (SVG), scaling is lossless.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.