Registry / productivity / react-photo-view

react-photo-view

library1.2.7jsnpmunverified

A React photo preview component for image galleries with pinch-to-zoom, swipe, and keyboard navigation. Current stable version is 1.2.7. Released regularly with bug fixes and minor enhancements. Differentiators include full-screen overlay, customizable toolbar, and support for lazy loading. TypeScript definitions are included. Requires react >= 16.8.0 and react-dom >= 16.8.0.

productivity

npm install react-photo-view

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-PHOTO-VIEW

react-photo-view

productivityjavascriptv1.2.7

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

PhotoProvider

✓ import { PhotoProvider } from 'react-photo-view'

✗ import PhotoProvider from 'react-photo-view'

Named export, not default.

PhotoView

✓ import { PhotoView } from 'react-photo-view'

✗ const PhotoView = require('react-photo-view').PhotoView

ESM import preferred; CJS require works but might be tree-shaken.

PhotoSlider

✓ import { PhotoSlider } from 'react-photo-view'

✗ import { PhotoSlider } from 'react-photo-view/dist/PhotoSlider'

PhotoSlider is a named export, do not use a subpath.

Basic setup with PhotoProvider wrapper and PhotoView component using a sample image URL.

import React from 'react'; import { PhotoProvider, PhotoView } from 'react-photo-view'; import 'react-photo-view/dist/react-photo-view.css'; function MyComponent() { return ( <PhotoProvider> <PhotoView src="https://example.com/image.jpg"> <img src="https://example.com/image.jpg" alt="Preview" /> </PhotoView> </PhotoProvider> ); } export default MyComponent;

Debug

Known issues

gotchaCSS must be imported separately for styling.

fix

Add import 'react-photo-view/dist/react-photo-view.css';

affects: >=1.0.0

breakingPhotoView no longer requires a child element; as of v1.2, it accepts children optionally.

fix

If you were using it without children, it still works, but update code if you relied on children for triggering.

affects: >=1.2.0

gotchaKeyboard navigation only works when the PhotoProvider has focus.

fix

Ensure the PhotoProvider or a descendant element is focusable.

affects: >=1.0.0

gotchaNested PhotoProviders may cause unexpected behavior.

fix

Avoid nesting PhotoProvider components; use a single provider per page.

affects: >=1.0.0

Errors

Common errors & fixes

Module not found: Can't resolve 'react-photo-view/dist/react-photo-view.css'

CSS file not imported or missing in build configuration.

fix

Add import 'react-photo-view/dist/react-photo-view.css'; in your entry file.

TypeError: Cannot read properties of undefined (reading 'src')

Missing src prop on PhotoView component.

fix

Ensure each PhotoView has a valid src prop.

Warning: React does not recognize the `photoViewSrc` prop on a DOM element

Using wrong prop name for image source.

fix

Use src prop instead of photoViewSrc.

Upgrade

Version history

1.2.7latest on npm

Audit

Dependencies

reactrequiredpeer dependency required for React component rendering

react-domrequiredpeer dependency required for DOM rendering

Agent activity

22 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/MinJieLiu/react-photo-view ↗

packagereact-photo-view ↗

homepagehttps://github.com/MinJieLiu/react-photo-view#readme ↗