Add a 360-degree image view in a React website

Providing an interactive 360-degree view of your product can significantly enhance user engagement and trust. In this guide, you'll learn how to implement a 360-degree rotating image viewer in a React app—both with and without using a library.

✅ Step-by-Step Guide to Add a 360-Degree Product View

1. Prepare Your Image Assets

To simulate a 360-degree rotation:

• Capture multiple images of your product from various angles (ideally 36 images—one every 10 degrees).
• Name them in a consistent, sequential format:

  product_1.jpg, product_2.jpg, ..., product_36.jpg

• Place these images in the public/images/ directory of your React app.

🔧 Option 1: Using a Pre-built Library (react-360-view)

For a quick and effective solution, consider using the react-360-view package.

✅ Installation

npm install react-360-view

🧩 Component Implementation

// Product360View.jsx
import React from "react";
import { ThreeSixty } from "react-360-view";

const Product360View = () => {
  return (
    <div className="w-full flex justify-center items-center">
      <ThreeSixty
        amount={36}                         // Total number of images
        imagePath="/images/product_"        // Folder path
        fileName="product_{index}.jpg"      // Naming convention
      />
    </div>
  );
};

export default Product360View;

🔍 Explanation:

• amount: Number of images used for the rotation
• imagePath: Directory containing the images
• fileName: File format using {index} to dynamically switch images

🛠️ Option 2: Manual Implementation Without a Library

If you'd rather avoid third-party libraries, here's how to create the 360° effect using scroll or mouse movement.

🧩 Scroll-Based Manual Viewer

// Product360Manual.jsx
import React, { useState } from "react";

const Product360View = () => {
  const [currentImage, setCurrentImage] = useState(1);
  const totalImages = 36;

  const handleMouseScroll = (event) => {
    const delta = event.deltaY;
    setCurrentImage((prev) =>
      delta > 0
        ? prev === totalImages ? 1 : prev + 1
        : prev === 1 ? totalImages : prev - 1
    );
  };

  return (
    <div
      className="w-full flex justify-center items-center"
      onWheel={handleMouseScroll}
    >
      <img
        src={`/images/product_${currentImage}.jpg`}
        alt="360° product view"
        className="w-auto"
      />
    </div>
  );
};

export default Product360View;

💡 Explanation:

• The currentImage state tracks which image is shown.
• The onWheel event cycles through the images as the user scrolls.
• Image rotation wraps from last to first and vice versa.

🖱️ Optional: Rotate on Mouse Hover

To rotate based on horizontal mouse movement, you can use onMouseMove:

const handleMouseMove = (event) => {
  const { movementX } = event;
  setCurrentImage((prev) =>
    movementX > 0
      ? prev === totalImages ? 1 : prev + 1
      : prev === 1 ? totalImages : prev - 1
  );
};

Apply this handler to the <div> instead of onWheel for hover-based interaction.

🎨 Optional TailwindCSS Styling

Add some basic styling to enhance the appearance:

<div className="w-full h-auto border border-gray-200 rounded-md shadow-md overflow-hidden">
  <Product360View />
</div>

📝 Key Notes & Best Practices

• ✅ Optimize your images to reduce file size and ensure smooth transitions.
• 🔁 Combine scroll and hover for more interactive control.
• 📱 Consider mobile users by adding touch gesture support (either via a library or custom logic).
• 🧩 Use a library like react-360-view if you want faster setup and mobile-friendly features.

🚀 Conclusion

A 360-degree image view can greatly improve product visualization in e-commerce or portfolio sites. Whether you use a library or build from scratch, the experience helps users better understand what they’re buying.

Need help integrating this into your project? Feel free to ask! 👨‍💻