# 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:

```javascript
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:

```javascript
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

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

### Usage

```javascript
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.                                                                                                                                                 |