https://github.com/codesyntax/ionic-react-photo-viewer

Image viewer based on the photoswipe library adapted to Ionic React components.
https://github.com/codesyntax/ionic-react-photo-viewer

hacktoberfest image-viewer ionic ionic-react photo-viewer photoswipe react react-photo-gallery

Last synced: 2 months ago
JSON representation

Image viewer based on the photoswipe library adapted to Ionic React components.

• Host: GitHub
• URL: https://github.com/codesyntax/ionic-react-photo-viewer
• Owner: codesyntax
• Created: 2022-05-14T11:35:27.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-05-12T06:28:15.000Z (over 1 year ago)
• Last Synced: 2024-11-18T21:00:08.379Z (3 months ago)
• Topics: hacktoberfest, image-viewer, ionic, ionic-react, photo-viewer, photoswipe, react, react-photo-gallery
• Language: TypeScript
• Homepage: https://codesyntax.github.io/ionic-react-photo-viewer/
• Size: 35.9 MB
• Stars: 5
• Watchers: 5
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Ionic React Photo Viewer

##### Table of Contents

* [Demo](#demo)

* [Features](#features)

* [Installation](#installation)

* [Use example](#example)

* [Props](#props)



## [Demo](https://codesyntax.github.io/ionic-react-photo-viewer/?path=/story/example-ionphotoviewer--ion-avatar-item-example)

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](https://caniuse.com/css-backdrop-filter)).

* 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

```bash

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

```



## Use example

```tsx

// import component

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

// TSX

    

        

            

        

    

    Martin arrantzalea

```



## 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.