A react component for displaying images adapted to Ionic design.
- 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.
example_dark.mov
example_light.mov
npm install --save @codesyntax/ionic-react-photo-viewer// 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>- 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.