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:

Prop Name	Default Values	Description
sensitivity	1	The rotation speed on drag. (1 = fast).
numOfImagesPerColumn - Required		Number of images. Starts from 1.
defaultImagePosition	1	The start position (angle) of the 360 viewer. Please Note: If defaultImagePosition > total number of successful images loaded, then default image position will reset to 1.
reverseRotation	false	Reverse the direction of the 360 drag/spin.
imageSrc - Required	e.g imageSrc="/example-{col}.jpg"	The image src referenced using {col}. Could be remote location of the image using {col} e.g. https://example.com/example-{col}.jpg
width	auto	Sets the width of the component.
height	auto	Sets the height of the component.
border		Sets the border of the component.