virtual360-react
v1.2.0
Published
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.
Downloads
23
Maintainers
Readme
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. |