react-zoomable-img

A React Component that adds a smooth zoom on hover to images.

Install

npm install --save react-zoomable-img

Usage

import React, { Component } from 'react'

import ZoomableImage from 'react-zoomable-img'

class Example extends Component {
  render() {
    return  <ZoomableImage src='img/foo.jpg' alt='some alt text' zoomScale={3} onClick={someFunction} transitionDuration={0.5}/>
  }
}

Props

| Prop Name | Type | Default value | Description | | ------------------- | ----------------- | ------------- | ------------------------------------------------------ | | src | string | -- | the source of the image | | zoomScale | number | 2 | control the zoom scale of the image | | transitionDuration | number | 0.1 | control speed of the zoom transition (seconds) | | alt | string | '' | alt text | | onClick | function | | on image click function | | className | string | | add a className to the image |

License

MIT © imadat24