# @vjcspy/react-360-view

> A Simple and Beautiful 360 viewer for your product

Latest version **0.1.6** (published 2022-06-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vjcspy/react-360-view
pnpm add @vjcspy/react-360-view
yarn add @vjcspy/react-360-view
bun add @vjcspy/react-360-view
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2022-06-05 |
| First published | 2022-06-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 90.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 51 |
| Author | Rajeev R. Gade |
| Maintainers | vjcspy |

## Links

- npm: https://www.npmjs.com/package/@vjcspy/react-360-view
- Repository: https://github.com/rajeevgade/react-360
- Homepage: https://react-360.vercel.app/
- Issues: https://github.com/rajeevgade/react-360/issues
- npm.io page: https://npm.io/package/@vjcspy/react-360-view

## Dependencies (8)

- [react](https://npm.io/package/react.md) ^16.12.0
- [acorn-jsx](https://npm.io/package/acorn-jsx.md) ^5.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.12.0
- [react-scripts](https://npm.io/package/react-scripts.md) 3.4.0
- [react-hammerjs](https://npm.io/package/react-hammerjs.md) ^1.0.1
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^9.3.2
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^4.2.4
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^7.1.2

## Recent versions

- 0.1.6 (latest) — 2022-06-05
- 0.1.5 — 2022-06-05
- 0.1.4 — 2022-06-05
- 0.1.3 — 2022-06-05

## README

# react-360-view
- A Simple and Beautiful 360° Product Viewer built on React

## Demo

![Preview](https://www.techsolate.com/vue-360-viewer/demo.gif)

https://github.com/rajeevgade/react-360/blob/master/src/App.js)

## Features

- 360° View
- Zoom
- Pan
- Autoplay (Loops)
- Full Screen Mode
- Spin Direction
- Image Caching
- Mobile Responsive (Under works)
- Touch Events (Under works)


## Installation
```
npm install react-360-view
```

## Config

```
import ThreeSixty from 'react-360-view'
```

## Example

```
<ThreeSixty
    amount={36}
    imagePath="https://scaleflex.cloudimg.io/width/600/q35/https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/demo/chair-360-36"
    fileName="chair_{index}.jpg?v1"
/>
```
### Adding a Header
```
<div class="v360-header text-light bg-dark">
    <span class="v360-header-title">36 Images - Autoplay (1 loop) - Reverse Spin</span>
    <span class="v360-header-description"></span>
</div>
```

### Icons
- The icons used in the demo are from fontawesome. Add the following in your header to display the icons.
```
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" type="text/css">
```

## Props

| Name | Type | Description | Required | Default Value |
| --- | --- | --- | --- | --- |
| amount | Number | Number of images | Yes ||
| imagePath | String | Path to your image | Yes ||
| fileName | String | File name format | Yes ||
| spinReverse | Boolean | Reverse Spin | Optional | false |
| autoplay | Number | Autoplay your images | Optional | 24 |
| loop | Number | Number of loops you want to autoplay | Optional | 1 |
| boxShadow | Boolean | Apply Box Shadow Background | Optional | false |
| buttonClass | String | Apply Styling to Buttons | Optional (light/dark) | light |
| paddingIndex | Boolean | Apply Leading Zero to Image Index | Optional | false |
| imageData | Array | Array src of images | Optional |  |
| disableZoom | Boolean | Disable zoom | Optional | false |

## Buttons 

(In order from left to right)

- Play/Pause
- Zoom In
- Zoom Out
- Pan / 360&deg; Mode
- Move Left
- Move Right
- Reset Position

---
_Source: https://npm.io/package/@vjcspy/react-360-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._