spin-zoom-360

Overview

Light weight 360° product viewer with zoom and panning capabilities built on React.

Installation

npm install spin-zoom-360

Props

The SpinZoom360 component accepts the following props for customizability.

| Prop Name | Type | Description | Required/Optional | Default Value | |---------------------------|-------------|---------------------------------------------------------------------------------|-------------------|----------------------| | images | string[] | Array of image paths. | Required | N/A | | disableSpin | bool | Disables spinning functionality | Optional | false | | disableZoom | bool | Disables zoom & pan functionality | Optional | false | | defaultIndex | int | Starting image index | Optional | 0 | | clickZoomFactor | int | Click zoom multiplier. zoomLevel * clickZoomFactor | Optional | 1.5 | | scrollZoomFactor | int | Scroll zoom multiplier. zoomLevel * scrollZoomFactor | Optional | 1.1 | | maxZoomLevel | int | Max zoom level. | Optional | 5 | | rotationSpeedThreshold | int | Pixel distance to trigger image change. Higher values slow the spin. | Optional | 15px | | spinOverlayComponent | Component | Custom component overlaying the image, indicating it's interactable. | Optional | Drag to spin | | onImageChange | Callback | A callback function triggered when the current image changes. | Optional | null |

Usage

Basic Usage

The SpinZoom360 component will take up 100% height and width if it's parent container. Example with using all default values:

import { SpinZoom360 } from 'spin-zoom-360'

function SpinZoomWrapper({ images }){
  
  return (
    <div style={{ height: "300px", width: "300px" }}>
      <SpinZoom360 images={images} />
    </div>
  )
}

Adding a spinOverlayComponent

The SpinZoom360 component will pass props to the Overlay component for styling purposes such as changing the opacity when user interacts with the component.

import { SpinZoom360 } from 'spin-zoom-360'

function Overlay({ ...props }){
  return (
    <div style={{...props.styling}} {...props}>
      Drag to spin / Tap to zoom & pan
    </div>
  )
}

function SpinZoomWrapper({ images }){
  return (
    <div style={{ height: "300px", width: "300px" }}>
      <SpinZoom360 
        images={images} 
        defaultIndex={4} // default 0
        clickZoomFactor={2} // default 1.5
        scrollZoomFactor={1.2} // default 1.1
        maxZoomLevel={10} // default 5
        spinOverlayComponent={Overlay}
        />
    </div>
  )
}