Ionic React Photo Viewer

A react component for displaying images adapted to Ionic design.

The features:

  • Pinch-to-zoom capability.
  • IonAvatar and IonThumbnail support.
  • Blurred background support (Available for Chrome and Safari).
  • IonHeader integration to adapt it to the native design.

IonPhotoViewer demo

Installation

npm install --save @codesyntax/ionic-react-photo-viewer

Use example

// import component
import IonPhotoViewer from '@codesyntax/ionic-react-photo-viewer';

// TSX
<IonItem button lines="none" detail={false}>
    <IonAvatar slot="start">
        <IonPhotoViewer
          title="Martin arrantzalea"
          src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Alcedo_Atthis.jpg/1280px-Alcedo_Atthis.jpg"
          licenseKey='your-license-key'
        >
            <img
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Alcedo_Atthis.jpg/1280px-Alcedo_Atthis.jpg"
            alt="Martin arrantzalea"
          />
        </IonPhotoViewer>
    </IonAvatar>
    <IonLabel>Martin arrantzalea</IonLabel>
</IonItem>

Props

  • title: string
    • The title of the image.
  • src: string
    • The source of the image in hight quality.
  • licenseKey: string
    • The license key of lightgallery.
  • children: React.ReactNode
    • Img element.

GitHub

View Github