react-photo-view

To use react-photo-view, you must first import the CSS file at your application's entry point.

Wrap your image list in a <PhotoProvider> to create a gallery boundary. Inside, wrap each trigger element (like an <img>) with a <PhotoView> component and provide the src prop. When a user clicks a <PhotoView> child, the library locates the image in the provider's sequence and opens the preview.

Note: To optimize memory, react-photo-view only keeps three images loaded in the DOM at a time.

import 'react-photo-view/dist/react-photo-view.css';
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>
  );
}

To implement basic image preview functionality, you need to use two main components: PhotoProvider and PhotoView.

1. Wrap your application or a specific section with PhotoProvider. This component acts as a boundary; all PhotoView components inside it are treated as a single gallery group.
2. Wrap the trigger element (e.g., an <img> tag) with PhotoView and provide the high-resolution image URL via the src prop.
3. Ensure you import the required CSS: import 'react-photo-view/dist/react-photo-view.css';.

When a user clicks the element inside PhotoView, the library will locate the corresponding image in the gallery and open the previewer.

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>
  );
}

While <PhotoProvider> is sufficient for most use cases, <PhotoSlider> provides a more granular API for advanced custom controls. It inherits all props from <PhotoProvider> and adds:

• images: list of images DataType[]
• visible: controlled visibility boolean
• onClose: close event callback () => void
• afterClose: callback after closing animation () => void
• index: controlled current index number
• onIndexChange: index change callback (index: number) => void

To control the slider, you must manage visible and index in your own state and pass them to the component.

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

  return (
    <>
      <Button onClick={() => setIndex(2)}>setIndex(2)</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}
      />
    </>
  );
}

While PhotoProvider is sufficient for most cases, PhotoSlider provides a more advanced API for manual control of the gallery state. It inherits all props from PhotoProvider and adds the following:

• images: DataType[] - The image list.
• visible: boolean - Controlled visibility state.
• onClose: () => void - Callback when closed.
• afterClose: () => void - Callback after the close animation finishes.
• index: number - Controlled current index.
• onIndexChange: (index: number) => void - Callback for index changes.

Example of a controlled PhotoSlider:

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

  return (
    <>
      <Button onClick={() => setIndex(2)}>setIndex(2)</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}
      />
    </>
  );
}