diff --git a/.all-contributorsrc b/.all-contributorsrc
index d4130f8..b9e9c16 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -10,15 +10,6 @@
"commit": true,
"commitConvention": "none",
"contributors": [
- {
- "login": "ruchikabgosain",
- "name": "Ruchika",
- "avatar_url": "https://avatars2.githubusercontent.com/u/30324532?v=4",
- "profile": "http://mozillians.org/en-US/u/ruchikabgosain/",
- "contributions": [
- "doc"
- ]
- },
{
"login": "s-yadav",
"name": "Sudhanshu Yadav",
@@ -45,6 +36,15 @@
"contributions": [
"doc"
]
+ },
+ {
+ "login": "ruchikabgosain",
+ "name": "Ruchika",
+ "avatar_url": "https://avatars2.githubusercontent.com/u/30324532?v=4",
+ "profile": "http://mozillians.org/en-US/u/ruchikabgosain/",
+ "contributions": [
+ "doc"
+ ]
}
],
"contributorsPerLine": 7
diff --git a/README.md b/README.md
index 6770923..91baa81 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,11 @@
-## react-iv-viewer
+# iv-viewer
___
+A zooming and panning plugin inspired by Google Photos for your web images. It comes in two different variants. First, a react-based zooming and panning component and 2nd vanilla JS-based zooming and panning library.
+
+## react-iv-viewer
+
`react-iv-viewer` is a React-based library for viewing images with advanced features like zooming, high-resolution image support, and full-screen viewing. It provides an easy way to integrate image viewing functionality into your React applications.
### Features
@@ -14,7 +18,6 @@ ___
- High-resolution image support
- Full-screen image viewing
- Customizable viewer dimensions
-- Event handlers for zoom and load events
- TypeScript support
### Demos
@@ -94,4 +97,44 @@ const viewer = new FullScreenViewer(options);
viewer.show('images/low-res-img', 'images/hi-res-img');
```
-This Markdown provides a clear and concise introduction to `iv-viewer`, its features, installation instructions, and usage examples for both normal and fullscreen viewers in an ES6 environment.
+### Like this
+[:star: this repo](https://github.com/s-yadav/iv-viewer)
+
+### Major updates
+
+#### v2.2.0
+
+- Includes TypeScript type declarations
+- Bugfixing
+
+#### v2.1.0
+
+- It's a complete rewrite of ImageViewer with no jQuery requirement in ES6.
+- While the options and instance method are same the way you use a ImageViewer and FullScreenView is changed. The v1 API will no longer be supported.
+- Published on the npm. V1 was not available on npm.
+- Changed the package name to iv-viewer. image-viewer name was not available on npm.
+- Added some listeners
+- Added zoom in/out buttons
+- Some SCSS variable for easier overrides.
+
+## Contributors ✨
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+
+
+
+
+
+
+
+
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
diff --git a/packages/iv-viewer/README.md b/packages/iv-viewer/README.md
index e123d47..6a0e395 100644
--- a/packages/iv-viewer/README.md
+++ b/packages/iv-viewer/README.md
@@ -244,45 +244,3 @@ The second image is optional, which you should pass when you feel you can improv
codesandbox preview link: [https://8ypwzryom0.codesandbox.io/](https://8ypwzryom0.codesandbox.io/)
codesandbox link: [https://codesandbox.io/s/8ypwzryom0](https://codesandbox.io/s/8ypwzryom0)
-
-### Like this
-[:star: this repo](https://github.com/s-yadav/iv-viewer)
-
-### Major updates
-
-#### v2.2.0
-
-- Includes TypeScript type declarations
-- Bugfixing
-
-#### v2.1.0
-
-- It's a complete rewrite of ImageViewer with no jQuery requirement in ES6.
-- While the options and instance method are same the way you use a ImageViewer and FullScreenView is changed. The v1 API will no longer be supported.
-- Published on the npm. V1 was not available on npm.
-- Changed the package name to iv-viewer. image-viewer name was not available on npm.
-- Added some listeners
-- Added zoom in/out buttons
-- Some SCSS variable for easier overrides.
-
-## Contributors ✨
-
-Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
-
-
-
-
-
-
-
-
-
-
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
diff --git a/packages/react-iv-viewer/src/FullScreenViewer.tsx b/packages/react-iv-viewer/src/FullScreenViewer.tsx
index 9cb1931..38c002e 100644
--- a/packages/react-iv-viewer/src/FullScreenViewer.tsx
+++ b/packages/react-iv-viewer/src/FullScreenViewer.tsx
@@ -1,6 +1,6 @@
import React, { useRef, useEffect } from 'react';
import { FullScreenViewer as BaseFullScreenViewer } from 'iv-viewer';
-import { FullScreenViewerProps, ViewerState } from './types';
+import { FullScreenViewerProps } from './types';
export const FullScreenViewer: React.FC = ({
img,
@@ -32,9 +32,9 @@ export const FullScreenViewer: React.FC = ({
hasZoomButtons,
zoomStep,
listeners: {
- onInit: (data: ViewerState) => {
+ onInit: ({ instance }: { instance: BaseFullScreenViewer }) => {
if (_onLoad.current) {
- _onLoad.current(data);
+ _onLoad.current(instance);
}
},
},
diff --git a/packages/react-iv-viewer/src/ImageViewer.tsx b/packages/react-iv-viewer/src/ImageViewer.tsx
index 4879e21..ad74e57 100644
--- a/packages/react-iv-viewer/src/ImageViewer.tsx
+++ b/packages/react-iv-viewer/src/ImageViewer.tsx
@@ -1,7 +1,7 @@
import React, { useRef, useEffect } from 'react';
import { ImageViewer as BaseImageViewer } from 'iv-viewer';
import 'iv-viewer/dist/iv-viewer.css';
-import { ImageViewerProps, ViewerState } from './types';
+import { ImageViewerProps } from './types';
export const ImageViewer: React.FC = ({
img,
@@ -39,15 +39,15 @@ export const ImageViewer: React.FC = ({
hasZoomButtons,
zoomStep,
listeners: {
- onInit: (data: ViewerState) => {
+ onInit: ({ instance }: { instance: BaseImageViewer }) => {
if (_onLoad.current) {
- _onLoad.current(data);
+ _onLoad.current(instance);
}
},
onDestroy: () => {},
- onZoomChange: (data: any) => {
+ onZoomChange: ({ zoomValue }: { zoomValue: number }) => {
if (_onZoomChange.current) {
- _onZoomChange.current(data.zoomValue);
+ _onZoomChange.current(zoomValue);
}
},
},
diff --git a/packages/react-iv-viewer/src/types.ts b/packages/react-iv-viewer/src/types.ts
index 57d6a43..b71e7b2 100644
--- a/packages/react-iv-viewer/src/types.ts
+++ b/packages/react-iv-viewer/src/types.ts
@@ -1,4 +1,7 @@
-import { ImageViewer as BaseImageViewer } from 'iv-viewer';
+import {
+ ImageViewer as BaseImageViewer,
+ FullScreenViewer as BaseFullScreenViewer,
+} from 'iv-viewer';
import React from 'react';
export enum ImageViewerMode {
@@ -6,7 +9,8 @@ export enum ImageViewerMode {
fullScreen = 'fullScreen',
}
-export interface ImageViewerProps extends React.HTMLAttributes {
+export interface ImageViewerProps
+ extends Omit, 'onLoad'> {
img: string;
hiResImg?: string;
width?: string;
@@ -19,11 +23,11 @@ export interface ImageViewerProps extends React.HTMLAttributes {
zoomOnMouseWheel?: boolean;
hasZoomButtons?: boolean;
zoomStep?: number;
- onLoad?: (viewer: any) => void;
- onZoomChange?: (data: any) => void;
+ onLoad?: (viewer: BaseImageViewer) => void;
+ onZoomChange?: (zoomValue: number) => void;
}
export interface FullScreenViewerProps
- extends React.ImgHTMLAttributes {
+ extends Omit, 'onLoad'> {
img: string;
hiResImg?: string;
defaultZoom: number;
@@ -33,14 +37,5 @@ export interface FullScreenViewerProps
zoomOnMouseWheel?: boolean;
hasZoomButtons?: boolean;
zoomStep?: number;
- onLoad?: (viewer: any) => void;
-}
-
-export interface ViewerState {
- container: HTMLDivElement;
- instance: BaseImageViewer;
- reachedMax: boolean;
- reachedMin: boolean;
- snapView: HTMLDivElement;
- zoomValue: number;
+ onLoad?: (viewer: BaseFullScreenViewer) => void;
}
