Merge pull request #12 from codesyntax/develop

readme

Author: bipoza

readme.md

@@ -1,23 +1,43 @@
 # Ionic React Photo Viewer
 
-## [DEMO](https://codesyntax.github.io/ionic-react-photo-viewer/?path=/story/example-ionphotoviewer--ion-avatar-item-example)
+##### Table of Contents
+
+* [Demo](#demo)
+* [Features](#features)
+* [Installation](#installation)
+* [Use example](#example)
+* [Props](#props)
+
+
+<a name="demo"/>
+
+## [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.
 
-The features:
+<a name="features"/>
+
+## 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.
 
-![IonPhotoViewer demo](./docs/ion-photo-viewer-demo.gif)
 
+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
+
+
+<a name="installation"/>
 
 ## Installation
 ```bash
 npm install --save @codesyntax/ionic-react-photo-viewer
 ```
 
+<a name="example"/>
+
 ## Use example
 ```tsx
 // import component
@@ -40,6 +60,7 @@ import IonPhotoViewer from '@codesyntax/ionic-react-photo-viewer';
     <IonLabel>Martin arrantzalea</IonLabel>
 </IonItem>
 ```
+<a name="props"/>
 
 ## Props
 * title: string
@@ -49,4 +70,4 @@ import IonPhotoViewer from '@codesyntax/ionic-react-photo-viewer';
 * licenseKey: string
   * The license key of lightgallery.
 * children: React.ReactNode
-  * Img element.
+  * Img element.