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.