react-zoom-smooth v1.0.0

react-zoom-smooth

A lightweight, customizable React wrapper component that provides a smooth zoom-in and zoom-out experience for images. It mimics the zoom effect seen on Medium and is fully configurable with zoom factor, animation duration, and background color.

Installation

You can install the package using npm or yarn:

npm install react-zoom-smooth

or

yarn add react-zoom-smooth

Usage

To use react-zoom-smooth, wrap any image component with ZoomImage:

import React from "react";
import { ZoomImage } from "react-zoom-smooth";

const App = () => (
  <div>
    <h1>Zoom Image Example</h1>

    <ZoomImage
      zoomFactor={2}
      duration={0.3}
      backgroundColor="rgba(0, 0, 0, 0.8)"
    >
      <img src="https://example.com/image.jpg" alt="Example Image" />
    </ZoomImage>
  </div>
);

export default App;

Props

License

You can use and modify this package as you wish. Feel free to make it yours or contribute!