@codesyntax/ionic-react-photo-viewer
TypeScript icon, indicating that this package has built-in type declarations

1.14.0 • Public • Published

Ionic React Photo Viewer

Table of Contents

Demo

A react component for displaying images adapted to Ionic design.

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.

https://user-images.githubusercontent.com/26112509/168749351-b7446907-458f-424f-86c9-c5ef639353d2.mov

https://user-images.githubusercontent.com/26112509/168749387-d7bb7b4a-f968-4e63-aaa2-876527ee6a58.mov

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.

Package Sidebar

Install

npm i @codesyntax/ionic-react-photo-viewer

Weekly Downloads

68

Version

1.14.0

License

MIT

Unpacked Size

2.56 MB

Total Files

19

Last publish

Collaborators

  • erral
  • ionlizarazu
  • bipoza
  • libargutxi