All Projects → infeng → React Viewer

infeng / React Viewer

Licence: mit
react image viewer, supports rotation, scale, zoom and so on

Programming Languages

32286 projects

Projects that are alternatives of or similar to React Viewer

V Viewer
Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js
Stars: ✭ 1,776 (+253.78%)
Mutual labels:  image, picture, gallery, viewer
Chevereto Free
Self-hosted Image Hosting solution. Start your own Flickr/imgur alternative with your own rules.
Stars: ✭ 2,275 (+353.19%)
Mutual labels:  photos, gallery, image-gallery
React Image Gallery
React carousel image gallery component with thumbnail support 🖼
Stars: ✭ 2,946 (+486.85%)
Mutual labels:  react-components, gallery, image-gallery
gis (go image server) go 实现的图片服务,实现基本的上传,下载,存储,按比例裁剪等功能
Stars: ✭ 108 (-78.49%)
Mutual labels:  image, picture, image-gallery
React Awesome Slider
React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders with fullpage transition support for NextJS and GatsbyJS. 🖥️ 📱
Stars: ✭ 2,343 (+366.73%)
Mutual labels:  react-components, gallery, image-gallery
Gallery shell
📷 Bash Script to generate static responsive image web galleries.
Stars: ✭ 198 (-60.56%)
Mutual labels:  photos, gallery, image-gallery
A command line tool to synchronise, upload, download, pictures between the local file system and Flickr. Image hash signature of the picture is used to uniquely identify the image.
Stars: ✭ 14 (-97.21%)
Mutual labels:  image, photos, picture
Recent Images
Do you noticed the new feature of Telegram or Instagram?! They show your latest images when you try to attach or post a picture. So I developed this library the same with lots of customization. Simple way to get all images of device based on date taken, name, id and other customization
Stars: ✭ 182 (-63.75%)
Mutual labels:  image, picture, gallery
A simple and customizable Android full-screen image viewer 一个简单且可自定义的Android全屏图像浏览器
Stars: ✭ 1,889 (+276.29%)
Mutual labels:  image, gallery, viewer
A simple and customizable Android full-screen image viewer with shared image transition support, "pinch to zoom" and "swipe to dismiss" gestures
Stars: ✭ 1,734 (+245.42%)
Mutual labels:  image, gallery, viewer
The World's Fastest Note Taking App. Fast. Simple. Create a note in one tap! Create image and text notes directly from your home screen!
Stars: ✭ 20 (-96.02%)
Mutual labels:  photos, gallery, picture
Quick Picture Viewer
🖼️ Lightweight, versatile desktop image viewer for Windows. The best replacement for the default Windows photo viewer.
Stars: ✭ 237 (-52.79%)
Mutual labels:  image, picture, viewer
📸 Instagram-like image picker for Android (一款 UI 炫酷高仿 Instagram 的图片、视频选择器)
Stars: ✭ 409 (-18.53%)
Mutual labels:  photos, picture, gallery
A library to take picture easy, transform your data in different format and save photos in your device
Stars: ✭ 327 (-34.86%)
Mutual labels:  photos, picture
The KIImagePager is inspired by foursquare's ImageSlideshow, the user may scroll through images loaded from the Web
Stars: ✭ 324 (-35.46%)
Mutual labels:  image, gallery
📸 Instagram-like image picker & filters for iOS
Stars: ✭ 3,661 (+629.28%)
Mutual labels:  picture, gallery
React Image Magnify
A responsive image zoom component designed for shopping sites.
Stars: ✭ 391 (-22.11%)
Mutual labels:  image, picture
Vue Picture Swipe
🖼 Vue Picture Swipe Gallery (a gallery of image with thumbnails, lazy-load and swipe) backed by photoswipe
Stars: ✭ 322 (-35.86%)
Mutual labels:  picture, gallery
Wechat-like image picker. Support select normal photos, videos, gif and livePhoto. Support edit image and crop video. 微信样式的图片选择器,支持预览/相册内拍照及录视频、拖拽/滑动选择,编辑图片/视频,支持多语言国际化等功能;
Stars: ✭ 3,962 (+689.24%)
Mutual labels:  photos, gallery
a modern photo / video gallery and lightbox [JS library]
Stars: ✭ 488 (-2.79%)
Mutual labels:  photos, gallery


NPM version codecov

react image viewer.


Because I can`t be comfortable using viewerjs in react, so I created react-viewer to replace it.


react >= 16.8.0 | react-dom >= 16.8.0

npm install react-viewer --save


import * as React from 'react';
import Viewer from 'react-viewer';

function App() {
  const [ visible, setVisible ] = React.useState(false);

  return (
      <button onClick={() => { setVisible(true); } }>show</button>
      onClose={() => { setVisible(false); } }
      images={[{src: '', alt: ''}]}

Server Side Rendering

I'm sorry, ssr is not currently supported in 3.x, it will be fixed in 4.0.


props type default description required
visible string false Viewer visible true
onClose function - Specify a function that will be called when Visible close true
images ImageDecorator[] [] image source array true
activeIndex number 0 active image index false
zIndex number 1000 Viewer css z-index false
container HTMLElement null set parent node(inline mode) false
drag boolean true whether to drag image false
attribute boolean true whether to show image attribute false
zoomable boolean true whether to show 'zoom' button false
rotatable boolean true whether to show 'rotate' button false
scalable boolean true whether to show 'scale' button false
onMaskClick (e) => void - callback function when mask is clicked false
downloadable boolean false whether to show 'download' false
noClose boolean false to not render close button false
noNavbar boolean false to not render the navbar false
noToolbar boolean false to not render the toolbar false
noImgDetails boolean false to not render image detail (WxH) false
noFooter boolean false to not render the entire footer false
changeable boolean true wheather to show change button false
customToolbar (defaultToolbarConfigs: ToolbarConfig[]) => ToolbarConfig[] - customer toolbar false
zoomSpeed number 0.05 zoom speed false
defaultSize ViewerImageSize - default image size false
defaultImg viewerdefaultimg - if load img failed, show default img false
disableKeyboardSupport boolean false disable keyboard support false
noResetZoomAfterChange boolean false preserve zoom after image change false
noLimitInitializationSize boolean false no limit image initialization size false
defaultScale number 1 set default scale false
onChange (activeImage: ImageDecorator, index: number) => void - callback when image change false
loop boolean true whether enable image loop false
disableMouseZoom boolean false whether disable mouse zoom false
downloadInNewWindow boolean false whether to download in a new window false
className string - customized CSS class false
showTotal boolean true whether to display the total number and range false
maxScale number - maximum scaling false
minScale number 0.1 minimum scaling false


props type default description required
src string - image source true
alt string - image description false
downloadUrl string - image downlaod url false
defaultSize ViewerImageSize - image size false


props type default description required
width number - image width true
height number - image height true


props type default description required
src number - image source true
width number - image width false
height number - image height false


props type default description required
key string - tool key true
render React.ReactNode - tool render false
onClick function - callback function when action is clicked false

Keyboard support

  • Esc: Close viewer.
  • : View the previous image.
  • : View the next image.
  • : Zoom in the image.
  • : Zoom out the image.
  • Ctrl + 1: Reset the image.
  • Ctrl + ←: Rotate left the image.
  • Ctrl + →: Rotate right the image.



Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].