reactjs-360-view
TypeScript icon, indicating that this package has built-in type declarations

0.0.12 • Public • Published

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 reactjs-360-view

Config

import React360view from 'reactjs-360-view'

styles.css
@import url('https://cdn.jsdelivr.net/npm/reactjs-360-view/styles.css');

Example

<React360view
    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

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

/reactjs-360-view/

    Package Sidebar

    Install

    npm i reactjs-360-view

    Weekly Downloads

    18

    Version

    0.0.12

    License

    MIT

    Unpacked Size

    589 kB

    Total Files

    13

    Last publish

    Collaborators

    • hunghg255