1.0.1 • Published 5 years ago

rc-image-lightbox v1.0.1

Weekly downloads
1
License
MIT
Repository
github
Last release
5 years ago

react-viewer

NPM version npm.io codecov

react image viewer.

Introduction

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

Installation

npm install react-viewer --save

Usage

import * as React from 'react';
import Viewer from 'react-viewer';
import 'react-viewer/dist/index.css';

class App extends React.Component<any, any> {
  constructor() {
    super();

    this.state = {
      visible: false,
    };
  }

  render() {
    return (
      <div>
        <button onClick={() => { this.setState({ visible: !this.state.visible }); } }>show</button>
        <Viewer
        visible={this.state.visible}
        onClose={() => { this.setState({ visible: false }); } }
        images={[{src: '', alt: ''}]}
        />
      </div>
    );
  }
}

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

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