Getting Started with Virtual360 for React

Overview

Virtual360 is an amazing pure React component which stitches together set of images into a smooth 360-degree image. This component is perfect for developers who want to provide ultimate and immersive user experience.

Installation

npm install virtual360-react

or

yarn add virtual360-react

Key Features

• Spin in any direction (360 Viewer)
• Support any number of images
• Responsive design - Images scale up/down to fit any screen size
• Pre-loads images - Improves performance
• Works flawlessly on every computer and mobile devices
• No jQuery
• More coming soon!

Quick Start Guide

Make sure the images have sequential naming and must always use 2 or more digits i.e. 01, 02, 03. For example:

example-01.jpg
example-02.jpg
example-03.jpg
example-04.jpg
example-05.jpg
...

The images will be referenced using {col}. For example the src of the above images could look like this:

src = "/example-{col}.jpg";

Please Note: If a specific image is not successfully loaded (e.g gives a 404 error), it will be ignored and 360 viewer will still load unless all images could not be loaded.

Import the Component

import Virtual360 from "virtual360-react/dist/Virtual360";

Usage

import Virtual360 from "virtual360-react/dist/Virtual360";

function Main() {
  return (
    <div>
      <Virtual360
        sensitivity={1}
        numOfImagesPerColumn={32}
        defaultImagePosition={30}
        imageSrc="/example-{col}.jpg"
      ></Virtual360>
    </div>
  );
}

export default Main;

The Virtual360 component takes the following props: