Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-image-zoom

Package Overview
Dependencies
Maintainers
1
Versions
15
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-image-zoom

react based image zoomer on mouse hover

  • 1.3.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
7.8K
increased by7.69%
Maintainers
1
Weekly downloads
 
Created
Source

react-image-zoom

Overview

React component for desktop browsers for image zoom on mouse hover.

Demo

Demo

Install

npm install react-image-zoom --save

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import ReactImageZoom from 'react-image-zoom';

const props = {width: 400, height: 250, zoomWidth: 500, img: "1.jpg"};
ReactDOM.render(<ReactImageZoom {...props} />, document.getElementById('react-app'));

propTypes

  • width (number) - width of the source image (required)
  • height (number) - height of the source image. If not provided, browser calculated height is used (optional).
  • zoomWidth (number) - width of the zoomed image. Zoomed image height equals source image height(optional if scale param is provided)
  • img (string) - url of the source image. Provided if container does not contain img element as a tag(optional)
  • scale (number) - zoom scale. if not provided, scale is calculated as natural image size / image size, provided in params (optional if zoomWidth param is provided)
  • offset (object) - {vertical: number, horizontal: number}. Zoomed image offset (optional)
  • zoomStyle (string) - custom style applied to the zoomed image (i.e. 'opacity: 0.1;background-color: white;')(optional)
  • zoomLensStyle (string) custom style applied to to zoom lents (i.e. 'opacity: 0.4;background-color: gray;')
  • zoomPosition (string) - position of zoomed image. It can be: top, left, bottom, original or the default right.

RouteMap

  • add sourceImg, zoomedImg properties to make it possible to use different images for source and zoomed images

Keywords

FAQs

Package last updated on 30 Dec 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc