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.