Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-viewer

Package Overview
Dependencies
Maintainers
1
Versions
56
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-viewer

react image viewer

  • 3.2.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

react-viewer

NPM version codecov

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 Rendering

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

Props

propstypedefaultdescriptionrequired
visiblestringfalseViewer visibletrue
onClosefunction-Specify a function that will be called when Visible closetrue
imagesImageDecorator[][]image source arraytrue
activeIndexnumber0active image indexfalse
zIndexnumber1000Viewer css z-indexfalse
containerHTMLElementnullset parent node(inline mode)false
dragbooleantruewhether to drag imagefalse
attributebooleantruewhether to show image attributefalse
zoomablebooleantruewhether to show 'zoom' buttonfalse
rotatablebooleantruewhether to show 'rotate' buttonfalse
scalablebooleantruewhether to show 'scale' buttonfalse
onMaskClick(e) => void-callback function when mask is clickedfalse
downloadablebooleanfalsewhether to show 'download'false
noClosebooleanfalseto not render close buttonfalse
noNavbarbooleanfalseto not render the navbarfalse
noToolbarbooleanfalseto not render the toolbarfalse
noImgDetailsbooleanfalseto not render image detail (WxH)false
noFooterbooleanfalseto not render the entire footerfalse
changeablebooleantruewheather to show change buttonfalse
customToolbar(defaultToolbarConfigs: ToolbarConfig[]) => ToolbarConfig[]-customer toolbarfalse
zoomSpeednumber0.05zoom speedfalse
defaultSizeViewerImageSize-default image sizefalse
defaultImgviewerdefaultimg-if load img failed, show default imgfalse
disableKeyboardSupportbooleanfalsedisable keyboard supportfalse
noResetZoomAfterChangebooleanfalsepreserve zoom after image changefalse
noLimitInitializationSizebooleanfalseno limit image initialization sizefalse
defaultScalenumber1set default scalefalse
onChange(activeImage: ImageDecorator, index: number) => void-callback when iamge changefalse
loopbooleantruewhether enable image loopfalse
disableMouseZoombooleanfalsewhether disable mouse zoomfalse
downloadInNewWindowbooleanfalsewhether to download in a new windowfalse
classNamestring-customized CSS classfalse
showTotalbooleantruewhether to display the total number and rangefalse
maxScalenumber-maximum scalingfalse
minScalenumber0.1minimum scalingfalse

ImageDecorator

propstypedefaultdescriptionrequired
srcstring-image sourcetrue
altstring-image descriptionfalse
downloadUrlstring-image downlaod urlfalse
defaultSizeViewerImageSize-image sizefalse

ViewerImageSize

propstypedefaultdescriptionrequired
widthnumber-image widthtrue
heightnumber-image heighttrue

ViewerDefaultImg

propstypedefaultdescriptionrequired
srcnumber-image sourcetrue
widthnumber-image widthfalse
heightnumber-image heightfalse

ToolbarConfig

propstypedefaultdescriptionrequired
keystring-tool keytrue
renderReact.ReactNode-tool renderfalse
onClickfunction-callback function when action is clickedfalse

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.

License

MIT

Keywords

FAQs

Package last updated on 22 Jun 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc