react-single-image-zoom
v1.0.2
Published
`react-single-image-zoom` is a React component that allows for easy image zoom functionality on wheel events within your React applications.
Downloads
18
Maintainers
Readme
react-single-image-zoom
react-single-image-zoom
is a React component that allows for easy image zoom functionality on wheel events within your React applications.
Features
- Simple integration with React applications.
- Zoom in/out functionality triggered by mouse wheel events.
- Customizable styles via className or inline style.
- Support for TypeScript.
Installation
Install the component using npm:
npm i react-single-image-zoom
Usage
To use the component, import it and wrap your image element:
import React from 'react';
import ImageZoom from 'react-single-image-zoom';
const MyComponent = () => {
return (
<ImageZoom
src={"https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQgByBT5IiAT_a2x9pUVb4VMoOrlzHH7Jrzj-HB5jzHlR4lNLMS"}
name={"dog"}
containerClassName={"imageContainer"}
containerStyle={{ width: "auto", height: "auto" }}
imageClassName={"imageClassName"}
imageStyle={{ width: "auto", height: "auto" }}
/>
);
};
export default MyComponent;
Props
| Prop | Type | Description |
| --- | --- | --- |
| src
| string
| The source URL of the image. |
| name
| string
| Alt text for the image. |
| containerClassName
| string (optional)
| Custom class for the image container. |
| containerStyle
| object (optional)
| Inline style for the image container. |
| imageClassName
| string (optional)
| Custom class for the image itself. |
| imageStyle
| object (optional)
| Inline style for the image. |
Contributing
If you have any suggestions or improvements, feel free to create issues or pull requests on the GitHub repository.