next-360-image-viewer/README.md

Display a set of images in a draggable 360 degree viewer.

## Install

```sh
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

```ts
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

```ts
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:

```ts
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
```