next-360-image-viewer

Install

npm i next-360-image-viewer
# Or
yarn add next-360-image-viewer
# Or
pnpm i next-360-image-viewer

Compatibility

• Next.js: 13.0.0 or higher
• React: 16.8 or higher (including React 19)
• TypeScript: 5.0 or higher

Examples

Basic Usage

import { NEXT_IMAGE_TURNTABLE } from 'next-360-image-viewer';

const images = [
  'https://via.placeholder.com/1920x1080?text=1',
  'https://via.placeholder.com/1920x1080?text=2',
  'https://via.placeholder.com/1920x1080?text=3',
];

export const VIEWER = () => {
  return (
    <>
      <NEXT_IMAGE_TURNTABLE images={images} />
    </>
  );
};

Autoplay with Controls

import { useRef } from 'react';
import { NEXT_IMAGE_TURNTABLE, type TURNTABLE_REF } from 'next-360-image-viewer';

export const AUTOPLAY_VIEWER = () => {
  const turntableref = useRef<TURNTABLE_REF>(null);

  const HANDLE_START_AUTOPLAY = () => {
    turntableref.current?.START_AUTOPLAY();
  };

  const HANDLE_STOP_AUTOPLAY = () => {
    turntableref.current?.STOP_AUTOPLAY();
  };

  return (
    <div>
      <NEXT_IMAGE_TURNTABLE
        ref={turntableref}
        images={images}
        autoplay={true}
        autoplayspeed={1500}
        autoplaydirection="forward"
        autopauseonhover={true}
      />
      <button onClick={HANDLE_START_AUTOPLAY}>Start Autoplay</button>
      <button onClick={HANDLE_STOP_AUTOPLAY}>Stop Autoplay</button>
    </div>
  );
};

Props

Props	Type	Required	Default Value
images	string[]	✓	undefined
initialimageindex	number		0
movementsensitivity	number		20
onload	function		undefined
className	string		undefined
autoplay	boolean		false
autoplayspeed	number		2000
autoplaydirection	'forward' | 'backward'		'forward'
autopauseonhover	boolean		true

Autoplay Controls

Use a ref to access autoplay control functions:

const turntableref = useRef<TURNTABLE_REF>(null);

// Available methods:
turntableref.current?.START_AUTOPLAY();
turntableref.current?.STOP_AUTOPLAY();
turntableref.current?.PAUSE_AUTOPLAY();
turntableref.current?.RESUME_AUTOPLAY();

// Available state:
turntableref.current?.isautoplayactive; // boolean
turntableref.current?.ispaused; // boolean
turntableref.current?.activeimageindex; // number