r3v

react-360-view-depty

A Simple and Beautiful 360° Product Viewer built on React.js

Showing:

Popularity

Downloads/wk

313

GitHub Stars

14

Maintenance

Last Commit

1yr ago

Contributors

2

Package

Dependencies

8

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-360-view

  • A Simple and Beautiful 360° Product Viewer built on React

Click here for Vue version

Demo

Preview

Demo | Documentation

Example

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

NameTypeDescriptionRequiredDefault Value
amountNumberNumber of imagesYes
imagePathStringPath to your imageYes
fileNameStringFile name formatYes
spinReverseBooleanReverse SpinOptionalfalse
autoplayNumberAutoplay your imagesOptional24
loopNumberNumber of loops you want to autoplayOptional1
boxShadowBooleanApply Box Shadow BackgroundOptionalfalse
buttonClassStringApply Styling to ButtonsOptional (light/dark)light
paddingIndexBooleanApply Leading Zero to Image IndexOptionalfalse

Buttons

(In order from left to right)

  • Play/Pause
  • Zoom In
  • Zoom Out
  • Pan / 360° Mode
  • Move Left
  • Move Right
  • Reset Position

Roadmap

  • Hotspots
  • Lazyloading
  • Custom CSS Classes
  • Custom Buttons
  • And a few more ...

Credits

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100