### Install react-photo-view using Package Managers

Source: https://github.com/minjieliu/react-photo-view/blob/master/packages/example/pages/docs/getting-started.zh-CN.mdx

Instructions for installing the react-photo-view library using popular package managers like pnpm, yarn, and npm. This is the first step to integrate image preview functionality into your React application.

```plaintext
pnpm i react-photo-view
```

```plaintext
yarn add react-photo-view
```

```plaintext
npm install react-photo-view
```

--------------------------------

### Import CSS for react-photo-view

Source: https://github.com/minjieliu/react-photo-view/blob/master/packages/example/pages/docs/getting-started.zh-CN.mdx

How to import the necessary CSS file for react-photo-view into your application's entry point. This ensures that the styling for the image preview components is correctly applied.

```javascript
import 'react-photo-view/dist/react-photo-view.css';
```

--------------------------------

### Basic Usage of PhotoProvider and PhotoView in React

Source: https://github.com/minjieliu/react-photo-view/blob/master/packages/example/pages/docs/getting-started.zh-CN.mdx

Demonstrates the fundamental usage of PhotoProvider and PhotoView components for creating an image preview gallery. Images within the PhotoProvider are grouped, and clicking on an image opens a preview.

```jsx
import { PhotoProvider, PhotoView } from 'react-photo-view';

export default function MyComponent() {
  return (
    <PhotoProvider>
      <div className="foo">
        {images.map((item, index) => (
          <PhotoView key={index} src={item}>
            <img src={item} alt="" />
          </PhotoView>
        ))}
      </div>
    </PhotoProvider>
  );
}
```

--------------------------------

### PhotoProvider Loop Configuration

Source: https://github.com/minjieliu/react-photo-view/blob/master/packages/example/pages/docs/getting-started.zh-CN.mdx

Demonstrates configuring the `loop` parameter on PhotoProvider to control circular preview behavior. The `loop` prop can be a boolean to enable/disable looping or a number to specify a threshold for when looping should activate.

```jsx
<PhotoProvider loop={4} />
```

--------------------------------

### Customizing Transition Animation Speed and Easing

Source: https://github.com/minjieliu/react-photo-view/blob/master/packages/example/pages/docs/getting-started.zh-CN.mdx

Example of customizing the transition animation duration and easing function for react-photo-view. The `speed` and `easing` props accept functions to control the animation's timing and feel, with options to differentiate between opening, closing, and index switching animations.

```jsx
<PhotoProvider
  speed={() => 800}
  easing={(type) => (type === 2 ? 'cubic-bezier(0.36, 0, 0.66, -0.56)' : 'cubic-bezier(0.34, 1.56, 0.64, 1)')}
/>
```

--------------------------------

### Add Custom Overlay to PhotoProvider

Source: https://github.com/minjieliu/react-photo-view/blob/master/packages/example/pages/docs/getting-started.en-US.mdx

Implement custom nodes for the overlay area in PhotoProvider by providing an 'overlayRender' function. The return value of this function is the same as that of the 'toolbarRender' function.

```jsx
<PhotoProvider overlayRender={() => <div>Custom Overlay</div>} />
```

--------------------------------

### PhotoView for Previewing More Images

Source: https://github.com/minjieliu/react-photo-view/blob/master/packages/example/pages/docs/getting-started.zh-CN.mdx

Shows how to use PhotoView without direct child elements to include images in a preview queue. This allows triggering a preview of additional images through a single entry point, even if those images are not directly displayed.

```jsx
<PhotoProvider>
  {images.map((item, index) => (
    <PhotoView key={index} src={item}>
      {index < 2 ? <img src={item} alt="" /> : undefined}
    </PhotoView>
  ))}
</PhotoProvider>
```

--------------------------------

### Custom Node Rendering with PhotoView

Source: https://github.com/minjieliu/react-photo-view/blob/master/packages/example/pages/docs/getting-started.zh-CN.mdx

Illustrates how to use the `render` prop of PhotoView to support custom node previews, such as videos or PDFs. The render function receives scale and attribute information, allowing for dynamic styling and content presentation within the preview.

```jsx
const elementSize = 400;

function MyComponent() {
  return (
    <PhotoView
      width={elementSize}
      height={elementSize}
      render={({ scale, attrs }) => {
        const width = parseFloat((attrs?.style?.width ?? 0) as string);
        const offset = (width - elementSize) / elementSize;
        const childScale = scale === 1 ? scale + offset : 1 + offset;

        return (
          <div {...attrs}>
            <div style={{ transform: `scale(${childScale})`, width: elementSize, transformOrigin: '0 0' }}>
              <div>Hello world</div>
              <Button>button</Button>
              <input onMouseDown={(e) => e.stopPropagation()} />
            </div>
          </div>
        );
      }}
    >
      <Button primary>Click</Button>
    </PhotoView>
  );
}
```

--------------------------------

### Implementing Zoom Functionality with Custom Toolbar

Source: https://github.com/minjieliu/react-photo-view/blob/master/packages/example/pages/docs/getting-started.zh-CN.mdx

Shows how to add zoom-in and zoom-out buttons to the image preview toolbar using the `toolbarRender` prop. It utilizes the `onScale` function provided by the `PhotoProvider` to adjust the image scale.

```jsx
<PhotoProvider
  toolbarRender={({ onScale, scale }) => {
    return (
      <>
        <svg className="PhotoView-Slider__toolbarIcon" onClick={() => onScale(scale + 1)} />
        <svg className="PhotoView-Slider__toolbarIcon" onClick={() => onScale(scale - 1)} />
      </>
    );
  }}
/>
```

--------------------------------

### Controlled PhotoSlider with Custom Buttons

Source: https://github.com/minjieliu/react-photo-view/blob/master/packages/example/pages/docs/getting-started.zh-CN.mdx

Demonstrates using the PhotoSlider component in a controlled manner with buttons to change the current image index and control visibility. It takes an array of images, manages visibility and index state, and provides callbacks for closing and index changes.

```jsx
export default function MyComponent() {
  const [visible, setVisible] = useState(false);
  const [index, setIndex] = useState(0);

  return (
    <>
      <Button onClick={() => setIndex(2)}>setIndex(2)</Button>
      <Button onClick={() => setIndex(4)}>setIndex(4)</Button>
      <Button onClick={() => setVisible(true)} primary>
        Click
      </Button>

      <PhotoSlider
        images={images.map((item) => ({ src: item, key: item }))}
        visible={visible}
        onClose={() => setVisible(false)}
        index={index}
        onIndexChange={setIndex}
      />
    </>
  );
}
```

--------------------------------

### PhotoProvider Banner Visibility Control

Source: https://github.com/minjieliu/react-photo-view/blob/master/packages/example/pages/docs/getting-started.zh-CN.mdx

Illustrates disabling the top banner area of the PhotoProvider by setting the `bannerVisible` prop to `false`. This can be used to create a cleaner interface when the top controls are not needed.

```jsx
<PhotoProvider bannerVisible={false} />
```

--------------------------------

### Implementing Rotation Functionality with Custom Toolbar

Source: https://github.com/minjieliu/react-photo-view/blob/master/packages/example/pages/docs/getting-started.zh-CN.mdx

Demonstrates how to add a rotation button to the image preview toolbar. It uses the `onRotate` function provided by `PhotoProvider` to incrementally rotate the image by 90 degrees.

```jsx
<PhotoProvider
  toolbarRender={({ rotate, onRotate }) => {
    return <svg className="PhotoView-Slider__toolbarIcon" onClick={() => onRotate(rotate + 90)} />;
  }}
/>
```

--------------------------------

### PhotoProvider Mask Opacity Configuration

Source: https://github.com/minjieliu/react-photo-view/blob/master/packages/example/pages/docs/getting-started.zh-CN.mdx

Shows how to set the `maskOpacity` prop on PhotoProvider to control the default transparency of the overlay mask. The value should be a number between 0 and 1, affecting the initial opacity during the preview.

```jsx
<PhotoProvider maskOpacity={0.5} />
```

--------------------------------

### React Photo View with CSS Object-Fit for Cropping

Source: https://github.com/minjieliu/react-photo-view/blob/master/packages/example/pages/docs/getting-started.en-US.mdx

Demonstrates how to achieve a cropping effect for thumbnails within the zoom animation by applying CSS `object-fit: cover` to the `img` tag nested within `PhotoView`.

```jsx
<PhotoView src={imageURL}>
  <img src={imageURL} style={{ objectFit: 'cover' }} alt="" />
</PhotoView>
```

--------------------------------

### Basic Usage of react-photo-view Component

Source: https://github.com/minjieliu/react-photo-view/blob/master/README.zh-CN.md

Demonstrates the fundamental setup for using the PhotoProvider and PhotoView components in a React application. It requires importing the necessary components and the component's CSS. The PhotoView component wraps an image and enables preview functionality.

```javascript
import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';

function App() {
  return (
    <PhotoProvider>
      <PhotoView src="/1.jpg">
        <img src="/1-thumbnail.jpg" alt="" />
      </PhotoView>
    </PhotoProvider>
  );
}
```

--------------------------------

### Install react-photo-view using Yarn

Source: https://github.com/minjieliu/react-photo-view/blob/master/README.md

This command installs the react-photo-view package using the Yarn package manager. Ensure you have Yarn installed and configured in your project.

```bash
yarn add react-photo-view
```

--------------------------------

### Implement Custom PhotoView Feedback

Source: https://github.com/minjieliu/react-photo-view/blob/master/packages/example/pages/docs/getting-started.en-US.mdx

Provide custom elements for loading or broken states in PhotoView. Use 'loadingElement' to specify a React element for the loading state and 'brokenElement' for the load failure state. By default, empty nodes are rendered on failure.

```jsx
<PhotoView 
  brokenElement={<p>Loading failed!</p>} 
  loadingElement={<p>Loading...</p>}
/>
```

--------------------------------

### Using PhotoView with Custom Trigger Components

Source: https://github.com/minjieliu/react-photo-view/blob/master/packages/example/pages/docs/getting-started.zh-CN.mdx

Illustrates how to use the `PhotoView` component with custom trigger elements, such as a custom `Button` component. It emphasizes the need for the custom component to handle `onClick` events and forward `ref` to an `HTMLElement` for proper animation.

```jsx
<PhotoView src={imageURL}>
  <Button primary>Click</Button>
</PhotoView>
```

--------------------------------

### PhotoProvider Mask and Pull Closable Events

Source: https://github.com/minjieliu/react-photo-view/blob/master/packages/example/pages/docs/getting-started.zh-CN.mdx

Demonstrates disabling the default closing behavior of the PhotoProvider. `pullClosable` controls closing by swiping down, and `maskClosable` controls closing by clicking the mask, both default to `true` and can be set to `false`.

```jsx
<PhotoProvider pullClosable={false} maskClosable={false} />
```

--------------------------------

### React PhotoProvider - Gallery Container Component

Source: https://context7.com/minjieliu/react-photo-view/llms.txt

The `PhotoProvider` component acts as a gallery container, managing the state for photo previews and coordinating multiple `PhotoView` components. It handles the lightbox overlay, navigation, and global configuration for animations and appearance. This example demonstrates setting custom animation speeds, easing functions, loop counts, mask opacity, and closable behaviors.

```jsx
import React from 'react';
import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';

function Gallery() {
  return (
    <PhotoProvider
      speed={(type) => (type === 3 ? 600 : 400)}
      easing={(type) => 'cubic-bezier(0.25, 0.8, 0.25, 1)'}
      loop={3}
      maskOpacity={0.9}
      maskClosable={true}
      pullClosable={true}
      bannerVisible={true}
      photoClosable={false}
      onIndexChange={(index, state) => {
        console.log('Current photo index:', index);
        console.log('Gallery state:', state);
      }}
      onVisibleChange={(visible, index, state) => {
        console.log('Lightbox visible:', visible);
        console.log('At index:', index);
      }}
    >
      <div className="gallery">
        <PhotoView src="https://example.com/photo1.jpg">
          <img src="https://example.com/thumb1.jpg" alt="Photo 1" />
        </PhotoView>
        <PhotoView src="https://example.com/photo2.jpg">
          <img src="https://example.com/thumb2.jpg" alt="Photo 2" />
        </PhotoView>
        <PhotoView src="https://example.com/photo3.jpg">
          <img src="https://example.com/thumb3.jpg" alt="Photo 3" />
        </PhotoView>
      </div>
    </PhotoProvider>
  );
}

export default Gallery;
```

--------------------------------

### React PhotoView - Individual Photo Item Configuration

Source: https://context7.com/minjieliu/react-photo-view/llms.txt

The `PhotoView` component represents a single previewable item within a `PhotoProvider`. It wraps a trigger element, such as a thumbnail, and specifies the source for the full-size image or custom content displayed in the lightbox. This example shows basic image usage, custom trigger elements like buttons, triggering previews via double-click, and adding custom overlay content.

```jsx
import React from 'react';
import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';

function CustomTriggers() {
  return (
    <PhotoProvider>
      {/* Basic usage with image */}
      <PhotoView src="/images/landscape.jpg">
        <img src="/images/landscape-thumb.jpg" alt="Landscape" />
      </PhotoView>

      {/* Custom trigger element */}
      <PhotoView src="/images/portrait.jpg">
        <button className="preview-button">View Photo</button>
      </PhotoView>

      {/* Double-click to open */}
      <PhotoView
        src="/images/architecture.jpg"
        triggers={['onDoubleClick']}
      >
        <img src="/images/architecture-thumb.jpg" alt="Architecture" />
      </PhotoView>

      {/* Custom overlay content */}
      <PhotoView
        src="/images/nature.jpg"
        overlay={
          <div className="photo-info">
            <h3>Mountain Vista</h3>
            <p>Captured at sunrise</p>
          </div>
        }
      >
        <img src="/images/nature-thumb.jpg" alt="Nature" />
      </PhotoView>
    </PhotoProvider>
  );
}

export default CustomTriggers;
```

--------------------------------

### Basic Usage of React Photo View Component

Source: https://github.com/minjieliu/react-photo-view/blob/master/README.md

Demonstrates the basic integration of the PhotoProvider and PhotoView components in a React application. It shows how to wrap an image element with PhotoView to enable preview functionality. Requires importing the component and its CSS. The `src` prop on `PhotoView` points to the full-size image, while the `src` on the child `img` tag is for the thumbnail.

```javascript
import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';

function App() {
  return (
    <PhotoProvider>
      <PhotoView src="/1.jpg">
        <img src="/1-thumbnail.jpg" alt="" />
      </PhotoView>
    </PhotoProvider>
  );
}

```

--------------------------------

### PhotoProvider Component API

Source: https://github.com/minjieliu/react-photo-view/blob/master/packages/example/pages/docs/api.zh-CN.mdx

Configuration options for the PhotoProvider component, which manages the overall photo view state and behavior.

```APIDOC
## PhotoProvider

### Description

The PhotoProvider component manages the overall photo view state and behavior, including transitions, closability, and custom rendering.

### Method

N/A (Component Props)

### Endpoint

N/A (Component Props)

### Parameters

#### Props

- **children** (React.ReactNode) - Required - The content to be rendered within the provider.
- **onIndexChange** ((index: number, state: PhotoProviderState) => void) - Optional - Callback function triggered when the active photo index changes.
- **onVisibleChange** ((visible: boolean, index: number, state: PhotoProviderState) => void) - Optional - Callback function triggered when the visibility of the photo view changes.
- **loop** (boolean | number) - Optional - Enables or configures looping behavior for photo previews. Defaults to 3.
- **speed** ((type: ActiveAnimationType) => number) - Optional - Defines the animation speed. Defaults to a function returning 400.
- **easing** ((type: ActiveAnimationType) => string) - Optional - Defines the animation easing function. Defaults to a function returning 'cubic-bezier(0.25, 0.8, 0.25, 1)'.
- **photoClosable** (boolean) - Optional - Determines if the photo can be closed by clicking on it.
- **maskClosable** (boolean) - Optional - Determines if the photo view can be closed by clicking on the mask. Defaults to true.
- **maskOpacity** (number | null) - Optional - Sets the opacity of the mask. Can be a number or null.
- **pullClosable** (boolean) - Optional - Determines if the photo view can be closed by pulling down. Defaults to true.
- **bannerVisible** (boolean) - Optional - Controls the visibility of the banner. Defaults to true.
- **overlayRender** ((overlayProps: OverlayRenderProps) => React.ReactNode) - Optional - Custom render function for the overlay.
- **toolbarRender** ((overlayProps: OverlayRenderProps) => React.ReactNode) - Optional - Custom render function for the toolbar.
- **className** (string) - Optional - Custom CSS class for the provider.
- **maskClassName** (string) - Optional - Custom CSS class for the mask.
- **photoWrapClassName** (string) - Optional - Custom CSS class for the photo wrapper.
- **photoClassName** (string) - Optional - Custom CSS class for the photo element.
- **loadingElement** (JSX.Element) - Optional - Custom element to display during loading.
- **brokenElement** (JSX.Element | ((photoProps: BrokenElementParams) => JSX.Element)) - Optional - Custom element or render function for broken image states.
- **portalContainer** (HTMLElement) - Optional - The DOM element where the photo view portal will be rendered. Defaults to document.body.

### Request Example

```jsx
<PhotoProvider
  loop={true}
  speed={500}
  onIndexChange={(index) => console.log(`Current index: ${index}`)}
>
  {/* Children elements */}
</PhotoProvider>
```

### Response

#### Success Response (N/A - Component Props)

#### Response Example

N/A
```

--------------------------------

### PhotoProvider Component API

Source: https://github.com/minjieliu/react-photo-view/blob/master/packages/example/pages/docs/api.en-US.mdx

This section details the properties available for the PhotoProvider component, allowing for customization of photo display, animations, and user interactions.

```APIDOC
## PhotoProvider Component

### Description
Provides a context for photo viewing, allowing for customizable display and interaction features.

### Method
Component (React)

### Endpoint
N/A

### Parameters
#### Props
- **children** (React.ReactNode) - Required - The content to be rendered within the PhotoProvider.
- **onIndexChange** ((index: number, state: PhotoProviderState) => void) - Optional - Callback function triggered when the photo index changes.
- **onVisibleChange** ((visible: boolean, index: number, state: PhotoProviderState) => void) - Optional - Callback function triggered when the visibility of the photo viewer changes.
- **loop** (boolean | number) - Optional - Determines if the photo preview should loop. Defaults to 3.
- **speed** ((type: ActiveAnimationType) => number) - Optional - Defines the animation speed. Defaults to a function returning 400.
- **easing** ((type: ActiveAnimationType) => string) - Optional - Specifies the animation easing function. Defaults to a function returning 'cubic-bezier(0.25, 0.8, 0.25, 1)'.
- **photoClosable** (boolean) - Optional - Allows the image to be closed by clicking on it.
- **maskClosable** (boolean) - Optional - Allows the viewer to be closed by clicking on the mask. Defaults to true.
- **maskOpacity** (number | null) - Optional - Sets the default background transparency. Defaults to 1.
- **pullClosable** (boolean) - Optional - Enables closing the viewer by pulling down. Defaults to true.
- **bannerVisible** (boolean) - Optional - Controls the visibility of the navigation banner. Defaults to true.
- **overlayRender** ((overlayProps: OverlayRenderProps) => React.ReactNode) - Optional - Custom render function for overlays.
- **toolbarRender** ((overlayProps: OverlayRenderProps) => React.ReactNode) - Optional - Custom render function for the toolbar.
- **className** (string) - Optional - Additional CSS class names for the container.
- **maskClassName** (string) - Optional - Additional CSS class names for the mask.
- **photoWrapClassName** (string) - Optional - Additional CSS class names for the photo wrapper.
- **photoClassName** (string) - Optional - Additional CSS class names for the photo element.
- **loadingElement** (JSX.Element) - Optional - Custom element to display during loading.
- **brokenElement** (JSX.Element | ((photoProps: BrokenElementParams) => JSX.Element)) - Optional - Custom element to display when an image fails to load.
- **portalContainer** (HTMLElement) - Optional - Specifies a custom DOM element for the portal. Defaults to `document.body`.

### Request Example
N/A (This is a component API, not an HTTP endpoint)

### Response
N/A (This is a component API, not an HTTP endpoint)

```

--------------------------------

### React Photo Preview Integration

Source: https://github.com/minjieliu/react-photo-view/blob/master/packages/example/pages/index.en-US.mdx

This snippet demonstrates how to integrate the react-photo-view component into a React application. It uses the PhotoProvider to wrap multiple PhotoView components, creating a gallery of previewable images. Clicking on a thumbnail triggers the full image preview.

```jsx
import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';

export default function App() {
  return (
    <PhotoProvider>
      <PhotoView src="/1.jpg">
        <img src="/1-thumbnail.jpg" alt="" />
      </PhotoView>
    </PhotoProvider>
  );
}
```

--------------------------------

### Configure React Photo View Animations and Interactions

Source: https://context7.com/minjieliu/react-photo-view/llms.txt

This snippet demonstrates how to configure advanced animation timings, easing functions, looping behavior, and interaction controls for the PhotoProvider component. It allows fine-tuning of the lightbox experience, including closing behaviors and backdrop opacity. Dependencies include 'react' and 'react-photo-view'.

```jsx
import React from 'react';
import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';

function AdvancedGallery() {
  return (
    <PhotoProvider
      // Animation configuration
      speed={(animationType) => {
        switch (animationType) {
          case 0: return 0;        // Initial
          case 1: return 300;      // Enter animation
          case 2: return 400;      // Exit animation
          case 3: return 600;      // Slide between photos
          default: return 400;
        }
      }}
      easing={(animationType) => {
        switch (animationType) {
          case 1: return 'cubic-bezier(0.25, 0.8, 0.25, 1)';
          case 2: return 'cubic-bezier(0.4, 0, 0.2, 1)';
          case 3: return 'cubic-bezier(0.4, 0, 0.2, 1)';
          default: return 'ease';
        }
      }}

      // Loop configuration
      loop={5}  // Enable loop when 5+ images, or use boolean

      // Interaction behavior
      photoClosable={true}        // Click photo to close
      maskClosable={true}          // Click backdrop to close
      pullClosable={true}          // Pull down to close
      maskOpacity={0.85}           // Backdrop opacity (0-1, or null)

      // UI visibility
      bannerVisible={true}         // Show top banner with counter

      // Custom styling
      className="custom-lightbox"
      maskClassName="custom-mask"
      photoWrapClassName="custom-photo-wrap"
      photoClassName="custom-photo"

      // Portal container
      portalContainer={document.getElementById('modal-root')}

      // Event callbacks
      onIndexChange={(index, state) => {
        console.log('Navigated to photo', index);
        console.log('Current state:', state.images, state.visible);
      }}
      onVisibleChange={(visible, index, state) => {
        if (visible) {
          console.log('Lightbox opened at index', index);
          document.body.style.overflow = 'hidden';
        } else {
          console.log('Lightbox closed');
          document.body.style.overflow = '';
        }
      }}
    >
      <div className="photo-grid">
        {Array.from({ length: 10 }, (_, i) => (
          <PhotoView
            key={i}
            src={`https://example.com/photo-${i + 1}.jpg`}
            width={1920}
            height={1080}
          >
            <img
              src={`https://example.com/thumb-${i + 1}.jpg`}
              alt={`Photo ${i + 1}`}
              loading="lazy"
            />
          </PhotoView>
        ))}
      </div>
    </PhotoProvider>
  );
}

export default AdvancedGallery;

```

--------------------------------

### PhotoView Component API

Source: https://github.com/minjieliu/react-photo-view/blob/master/packages/example/pages/docs/api.zh-CN.mdx

Configuration options for the PhotoView component, used to display individual photos within the PhotoProvider.

```APIDOC
## PhotoView

### Description

The PhotoView component displays individual photos and can be triggered to open within the PhotoProvider. It supports custom rendering and triggers.

### Method

N/A (Component Props)

### Endpoint

N/A (Component Props)

### Parameters

#### Props

- **src** (string) - Optional - The URL of the image to display.
- **render** ((props: PhotoRenderParams) => React.ReactNode) - Optional - A custom render function for the photo, with higher priority than `src`.
- **overlay** (React.ReactNode) - Optional - An overlay element to display on top of the photo.
- **width** (number) - Optional - Custom width for the rendered node.
- **height** (number) - Optional - Custom height for the rendered node.
- **children** (React.ReactElement) - Optional - Child elements, typically used for thumbnails.
- **triggers** (Array<"onClick" | "onDoubleClick">) - Optional - An array of event types that trigger the photo view. Defaults to `["onClick"]`.

### Request Example

```jsx
<PhotoProvider>
  <PhotoView src="path/to/image.jpg" width={200} height={150}>
    <img src="path/to/thumbnail.jpg" alt="thumbnail" />
  </PhotoView>
</PhotoProvider>
```

### Response

#### Success Response (N/A - Component Props)

#### Response Example

N/A
```

--------------------------------

### Standalone Controlled Lightbox with PhotoSlider

Source: https://context7.com/minjieliu/react-photo-view/llms.txt

Demonstrates how to use the PhotoSlider component for a controlled lightbox experience. This allows programmatic control over visibility and image lists, suitable for custom gallery implementations. It requires React and the react-photo-view library.

```jsx
import React, { useState } from 'react';
import { PhotoSlider } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';

function ControlledGallery() {
  const [visible, setVisible] = useState(false);
  const [index, setIndex] = useState(0);

  const images = [
    { src: 'https://example.com/photo1.jpg', key: 'photo1' },
    { src: 'https://example.com/photo2.jpg', key: 'photo2' },
    { src: 'https://example.com/photo3.jpg', key: 'photo3' },
    { src: 'https://example.com/photo4.jpg', key: 'photo4' },
  ];

  const openGallery = (photoIndex) => {
    setIndex(photoIndex);
    setVisible(true);
  };

  return (
    <div>
      <div className="thumbnail-grid">
        {images.map((image, idx) => (
          <img
            key={image.key}
            src={image.src}
            alt={`Thumbnail ${idx + 1}`}
            onClick={() => openGallery(idx)}
            className="thumbnail"
          />
        ))}
      </div>

      <PhotoSlider
        images={images}
        visible={visible}
        onClose={() => setVisible(false)}
        index={index}
        onIndexChange={setIndex}
        loop={true}
        speed={(type) => 400}
        easing={(type) => 'ease-out'}
        maskOpacity={0.95}
        afterClose={() => {
          console.log('Lightbox closed');
        }}
      />
    </div>
  );
}

export default ControlledGallery;
```

--------------------------------

### DataType for Images

Source: https://github.com/minjieliu/react-photo-view/blob/master/packages/example/pages/docs/api.en-US.mdx

Defines the structure for image data, including source, custom rendering, and origin reference.

```APIDOC
## DataType

### Description

Represents the data structure for an image within the photo view.

### Fields

#### `key` (number | string) - Required

Unique identifier for the image.

#### `src` (string) - Required

Resource address (URL) of the image.

#### `render` (function) - Optional

Custom rendering function. This has lower priority than `src`.
Signature: `(props: PhotoRenderParams) => React.ReactNode`

#### `overlay` (React.ReactNode) - Optional

Custom overlay content for this specific image.

#### `width` (number) - Optional

Custom width for the rendered image node.

#### `height` (number) - Optional

Custom height for the rendered image node.

#### `originRef` (React.MutableRefObject<HTMLElement | null>) - Optional

Reference to the HTML element that triggers the image view.
```

--------------------------------

### React: Custom Overlay with PhotoSlider

Source: https://context7.com/minjieliu/react-photo-view/llms.txt

This React component demonstrates how to use the `overlayRender` prop of the `PhotoSlider` component to display custom UI elements like captions, metadata, and navigation controls over the photo preview. It requires `react` and `react-photo-view` as dependencies.

```jsx
import React from 'react';
import { PhotoSlider } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';

function GalleryWithOverlay() {
  const [visible, setVisible] = React.useState(false);
  const [index, setIndex] = React.useState(0);

  const photoData = [
    {
      src: 'https://example.com/photo1.jpg',
      key: 'p1',
      title: 'Mountain Landscape',
      description: 'Captured at sunrise in the Rockies',
      photographer: 'John Doe'
    },
    {
      src: 'https://example.com/photo2.jpg',
      key: 'p2',
      title: 'City Skyline',
      description: 'Downtown at night',
      photographer: 'Jane Smith'
    },
    {
      src: 'https://example.com/photo3.jpg',
      key: 'p3',
      title: 'Ocean Sunset',
      description: 'Pacific coast evening',
      photographer: 'Mike Johnson'
    },
  ];

  return (
    <div>
      <button onClick={() => setVisible(true)}>Open Gallery</button>

      <PhotoSlider
        images={photoData}
        visible={visible}
        onClose={() => setVisible(false)}
        index={index}
        onIndexChange={setIndex}
        overlayRender={({
          index,
          images,
          onIndexChange,
          visible,
          onClose,
          overlayVisible
        }) => {
          const currentPhoto = images[index];

          return (
            <div
              className="custom-overlay"
              style={{ 
                position: 'absolute',
                bottom: 0,
                left: 0,
                right: 0,
                padding: '20px',
                background: 'linear-gradient(transparent, rgba(0,0,0,0.7))',
                color: 'white',
                opacity: overlayVisible ? 1 : 0,
                transition: 'opacity 0.3s',
              }}
            >
              <h2 style={{ margin: '0 0 10px 0' }}>
                {currentPhoto.title}
              </h2>
              <p style={{ margin: '0 0 10px 0' }}>
                {currentPhoto.description}
              </p>
              <div style={{ fontSize: '14px', opacity: 0.8 }}>
                Photo by {currentPhoto.photographer}
              </div>

              {/* Custom navigation */}
              <div style={{ marginTop: '15px', display: 'flex', gap: '10px' }}>
                {images.map((img, idx) => (
                  <button
                    key={img.key}
                    onClick={() => onIndexChange(idx)}
                    style={{ 
                      padding: '5px 10px',
                      background: idx === index ? 'white' : 'rgba(255,255,255,0.3)',
                      color: idx === index ? 'black' : 'white',
                      border: 'none',
                      borderRadius: '3px',
                      cursor: 'pointer',
                    }}
                  >
                    {idx + 1}
                  </button>
                ))}
              </div>
            </div>
          );
        }}
      />
    </div>
  );
}

export default GalleryWithOverlay;
```

--------------------------------

### OverlayRenderProps

Source: https://github.com/minjieliu/react-photo-view/blob/master/packages/example/pages/docs/api.en-US.mdx

Props passed to the custom overlay render function, providing control over the viewing experience.

```APIDOC
## OverlayRenderProps

### Description

Properties available within the custom overlay rendering function, allowing manipulation of the image viewing state.

### Properties

#### `images` (DataType[]) - Required

Array of image data objects.

#### `index` (number) - Required

Index of the currently displayed image.

#### `onIndexChange` (function) - Required

Callback function to change the current image index. Signature: `(index: number) => void`

#### `visible` (boolean) - Required

Determines if the overlay is currently visible.

#### `onClose` (function) - Required

Callback function executed when the overlay is requested to close. Signature: `(evt?: React.MouseEvent | React.TouchEvent) => void`

#### `overlayVisible` (boolean) - Required

Determines if the covering overlay element is visible.

#### `overlay` (React.ReactNode) - Required

The custom overlay content itself.

#### `rotate` (number) - Required

The current rotation angle of the image in degrees.

#### `onRotate` (function) - Required

Callback function to set the rotation angle. Signature: `(rotate: number) => void`

#### `scale` (number) - Required

The current zoom scale of the image.

#### `onScale` (function) - Required

Callback function to set the zoom scale. Signature: `(scale: number) => void`
```

--------------------------------

### PhotoView Component Props

Source: https://github.com/minjieliu/react-photo-view/blob/master/packages/example/pages/docs/api.en-US.mdx

Defines the props available for the PhotoView component, controlling image display and custom rendering.

```APIDOC
## PhotoView Component

### Description

The PhotoView component is used to display images with various customization options.

### Props

#### `src` (string) - Required

Image source URL.

#### `render` (function) - Optional

Custom rendering function. This has lower priority than `src`.
Signature: `(props: PhotoRenderParams) => React.ReactNode`

#### `overlay` (React.ReactNode) - Optional

Custom overlay content to display on top of the image.

#### `width` (number) - Optional

Custom width for the rendered node.

#### `height` (number) - Optional

Custom height for the rendered node.

#### `children` (React.ReactElement) - Optional

Child nodes, typically used for thumbnails.

#### `triggers` (Array<"onClick" | "onDoubleClick">) - Optional, Default: `["onClick"]`

The trigger mode that executes the opening image action. Can be `"onClick"` or `"onDoubleClick"`.
```

--------------------------------

### Custom Content Rendering with PhotoView Render Prop

Source: https://context7.com/minjieliu/react-photo-view/llms.txt

Illustrates using the `render` prop within `PhotoView` to display custom content like videos, iframes, or arbitrary HTML elements instead of just images. The render function provides scale, rotate, and DOM attributes for integration. Requires React and react-photo-view.

```jsx
import React from 'react';
import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';

function CustomContent() {
  return (
    <PhotoProvider maskOpacity={0.5} loop={false}>
      {/* Custom HTML content preview */}
      <PhotoView
        width={600}
        height={400}
        render={({ scale, attrs }) => {
          const width = parseFloat(attrs?.style?.width || '0');
          const childScale = scale === 1 ? scale + (width - 600) / 600 : 1 + (width - 600) / 600;

          return (
            <div {...attrs} className={`custom-content ${attrs.className || ''}`}>
              <div style={{
                transform: `scale(${childScale})`,
                width: 600,
                transformOrigin: '0 0',
                padding: 20
              }}>
                <h2>Custom Preview Content</h2>
                <p>This is a custom HTML preview with interactive elements.</p>
                <button
                  onClick={(e) => e.stopPropagation()}
                  onMouseDown={(e) => e.stopPropagation()}
                >
                  Click Me
                </button>
                <input
                  type="text"
                  placeholder="Type here"
                  onMouseDown={(e) => e.stopPropagation()}
                />
              </div>
            </div>
          );
        }}
      >
        <button>Preview Custom Content</button>
      </PhotoView>

      {/* Video preview */}
      <PhotoView
        width={800}
        height={450}
        render={({ attrs }) => (
          <video
            {...attrs}
            src="https://example.com/video.mp4"
            controls
            style={{ width: '100%', height: '100%' }}
            onMouseDown={(e) => e.stopPropagation()}
          />
        )}
      >
        <button>Play Video</button>
      </PhotoView>
    </PhotoProvider>
  );
}

export default CustomContent;
```

--------------------------------

### Custom Toolbar in React Photo View

Source: https://context7.com/minjieliu/react-photo-view/llms.txt

Implement a custom toolbar for the react-photo-view lightbox using the `toolbarRender` prop. This allows for adding custom controls such as zoom, rotation, fullscreen, and other actions. The render function receives overlay props including current state and control callbacks.

```jsx
import React, { useState } from 'react';
import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';

function GalleryWithToolbar() {
  const [images, setImages] = useState([
    'https://example.com/photo1.jpg',
    'https://example.com/photo2.jpg',
    'https://example.com/photo3.jpg',
  ]);

  const toggleFullScreen = () => {
    if (document.fullscreenElement) {
      document.exitFullscreen();
    } else {
      document.querySelector('.PhotoView-Portal')?.requestFullscreen();
    }
  };

  return (
    <PhotoProvider
      toolbarRender={({ rotate, onRotate, onScale, scale, index, images }) => (
        <>
          {/* Zoom In */}
          <svg
            className="PhotoView-Slider__toolbarIcon"
            onClick={() => onScale(scale + 0.5)}
            width="44"
            height="44"
            viewBox="0 0 768 768"
            fill="white"
          >
            <path d="M384 640.5q105 0 180.75-75.75t75.75-180.75-75.75-180.75-180.75-75.75-180.75 75.75-75.75 180.75 75.75 180.75 180.75 75.75zM384 64.5q132 0 225.75 93.75t93.75 225.75-93.75 225.75-225.75 93.75-225.75-93.75-93.75-225.75 93.75-225.75 225.75-93.75zM415.5 223.5v129h129v63h-129v129h-63v-129h-129v-63h129v-129h63z" />
          </svg>

          {/* Zoom Out */}
          <svg
            className="PhotoView-Slider__toolbarIcon"
            onClick={() => onScale(scale - 0.5)}
            width="44"
            height="44"
            viewBox="0 0 768 768"
            fill="white"
          >
            <path d="M384 640.5q105 0 180.75-75.75t75.75-180.75-75.75-180.75-180.75-75.75-180.75 75.75-75.75 180.75 75.75 180.75 180.75 75.75zM384 64.5q132 0 225.75 93.75t93.75 225.75-93.75 225.75-225.75 93.75-225.75-93.75-93.75-225.75 93.75-225.75 225.75-93.75zM223.5 352.5h321v63h-321v-63z" />
          </svg>

          {/* Rotate */}
          <svg
            className="PhotoView-Slider__toolbarIcon"
            onClick={() => onRotate(rotate + 90)}
            width="44"
            height="44"
            fill="white"
            viewBox="0 0 768 768"
          >
            <path d="M565.5 202.5l75-75v225h-225l103.5-103.5c-34.5-34.5-82.5-57-135-57-106.5 0-192 85.5-192 192s85.5 192 192 192c84 0 156-52.5 181.5-127.5h66c-28.5 111-127.5 192-247.5 192-141 0-255-115.5-255-256.5s114-256.5 255-256.5c70.5 0 135 28.5 181.5 75z" />
          </svg>

          {/* Fullscreen */}
          {document.fullscreenEnabled && (
            <svg
              className="PhotoView-Slider__toolbarIcon"
              onClick={toggleFullScreen}
              fill="white"
              width="44"
              height="44"
              viewBox="0 0 768 768"
            >
              <path d="M448.5 160.5h159v159h-63v-96h-96v-63zM544.5 544.5v-96h63v159h-159v-63h96zM160.5 319.5v-159h159v63h-96v96h-63zM223.5 448.5v96h96v63h-159v-159h63z" />
            </svg>
          )}

          {/* Custom action */}
          <svg
            className="PhotoView-Slider__toolbarIcon"
            onClick={() => {
              console.log('Custom action for image', index);
              // Perform custom logic
            }}
            width="44"
            height="44"
            fill="white"
            viewBox="0 0 768 768"
          >
            <path d="M384 559.5c-75 0-138-45-163.5-111h327c-25.5 66-88.5 111-163.5 111z" />
          </svg>
        </>
      )}
    >
      <div className="gallery">
        {images.map((src, index) => (
          <PhotoView key={index} src={src}>
            <img src={src} alt={`Photo ${index + 1}`} />
          </PhotoView>
        ))}
      </div>
    </PhotoProvider>
  );
}

export default GalleryWithToolbar;

```