@kalukali/react-viewer NPM

react-viewer

Fork react-viewer

props	type	default	description	required
customImgNode	(prop: ViewerCanvasProps) => React.ReactNode	-	customer imgNode support custom image containers	false
eventOnImg	boolean	false	When true, you can only drag and zoom on the image.	false
rotate	number	undefined	0 ~ 360°	false
onImgUpdate	(prop: ViewerCoreState) => void;	-	Image scaling, dragging and other attribute change callback events (high performance consumption, use with caution)	false
fetchImage	(successCb: SuccessCallback, src: string) => void	null	called when the component wants to receive an image from images prop	false

eg:

npm i @kalukali/react-viewer

  const customImgNode = status => (
    <div style={{ position: 'relative' }}>
      <img src={status.imgSrc} style={{ width: '100%', height: '100%' }} alt="" />
    </div>
  )

export const FetchImage = ({ images, selectedPhotoData, onSelectPhoto, setSelectedPhotoData, token }) => {
  return (
    <Viewer
      noNavbar
      fetchImage={(successCb, src) => {
        (async () => {
          await privateAxios(token).get(src, {
            responseType: 'blob',
          }).then((response) => {
            // successCb(URL.createObjectURL(response.data));
            const reader = new window.FileReader();
            reader.readAsDataURL(response.data);
            reader.onload = function () {
              successCb(reader.result);
            }
          })
        })()
      }}
      activeIndex={selectedPhotoData ? selectedPhotoData.index : 0}
      visible={!!selectedPhotoData}
      onClose={onSelectPhoto}
      images={images.map(i => ({ src: webResourcesPath + '/images' + i.path }))}
    />
  )
}

react image viewer.

Introduction

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

Installation

react >= 16.8.0 | react-dom >= 16.8.0

npm install react-viewer --save

Usage

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

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

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

Server Side (NextJS)

import React, { FC } from 'react'
import dynamic from 'next/dynamic'

const ReactViewer = dynamic(
  () => import('react-viewer'),
  { ssr: false }
)

export const Viewer: FC = () => {
  return (
    <ReactViewer
      visible={true}
      onClose={() => {}}
      images={[{src: ''}]}
    />
  )
}

export default Viewer

Server Side rest..

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

Props

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