New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@shopmacher/react-image-magnify

Package Overview
Dependencies
Maintainers
6
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@shopmacher/react-image-magnify

A responsive image zoom component designed for shopping sites.

  • 2.8.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
6
Created
Source

react-image-magnify

A responsive React image zoom component for touch and mouse.

Designed for shopping site product detail.

Features Include:

  • In-place and side-by-side image enlargement
  • Positive or negative space guide lens options
  • Interaction hint
  • Configurable enlarged image dimensions
  • Optional enlarged image external render
  • Hover intent
  • Long-press gesture
  • Fade transitions
  • Basic react-slick carousel support

Status

CircleCI Coverage Status npm License

Demo

Please visit the react-image-magnify demo site

Experiment with react-image-magnify live on CodePen. Use the Change View button to select editing mode or for different layout options. Use the Fork button to save your changes.

Installation

npm install react-image-magnify

Usage

If you are upgrading from v1x to v2x, please see the release notes.

import ReactImageMagnify from 'react-image-magnify';
...
<ReactImageMagnify {...{
    smallImage: {
        alt: 'Wristwatch by Ted Baker London',
        isFluidWidth: true,
        src: watchImg300
    },
    largeImage: {
        src: watchImg1200,
        width: 1200,
        height: 1800
    }
}} />
...

See more usage examples in the example project.

Required Props

PropTypeDefaultDescription
smallImageObjectN/ASmall image information. See Small Image below.
largeImageObjectN/ALarge image information. See Large Image below.

Optional Styling Props

PropTypeDefaultDescription
classNameStringN/ACSS class applied to root container element.
styleObjectN/AStyle applied to root container element.
imageClassNameStringN/ACSS class applied to small image element.
imageStyleObjectN/AStyle applied to small image element.
lensStyleObjectN/AStyle applied to tinted lens.
enlargedImageContainerClassNameStringN/ACSS class applied to enlarged image container element.
enlargedImageContainerStyleObjectN/AStyle applied to enlarged image container element.
enlargedImageClassNameStringN/ACSS class applied to enlarged image element.
enlargedImageStyleObjectN/AStyle applied to enlarged image element.

Optional Interaction Props

PropTypeDefaultDescription
fadeDurationInMsNumber300Milliseconds duration of magnified image fade in/fade out.
hoverDelayInMsNumber250Milliseconds to delay hover trigger.
hoverOffDelayInMsNumber150Milliseconds to delay hover-off trigger.
isActivatedOnTouchBooleanfalseActivate magnification immediately on touch. May impact scrolling.
pressDurationNumber500Milliseconds to delay long-press activation (long touch).
pressMoveThresholdNumber5Pixels of movement allowed during long-press activation.

Optional Behavioral Props

PropTypeDefaultDescription
enlargedImagePositionStringbeside (over for touch)Enlarged image placement. Can be 'beside' or 'over'.
enlargedImageContainerDimensionsObject{width: '100%', height: '100%'}Specify enlarged image container dimensions as an object with width and height properties. Values may be expressed as a percentage (e.g. '150%') or a number (e.g. 200). Percentage is based on small image dimension. Number is pixels. Not applied when enlargedImagePosition is set to 'over', the default for touch input.
enlargedImagePortalIdStringN/ARender enlarged image into an HTML element of your choosing by specifying the target element id. Requires React v16. Ignored for touch input by default - see isEnlargedImagePortalEnabledForTouch.
isEnlargedImagePortalEnabledForTouchBooleanfalseSpecify portal rendering should be honored for touch input.
hintComponentFunction(Provided)Reference to a component class or functional component. A Default is provided.
shouldHideHintAfterFirstActivationBooleantrueOnly show hint until the first interaction begins.
isHintEnabledBooleanfalseEnable hint feature.
hintTextMouseStringHover to ZoomHint text for mouse.
hintTextTouchStringLong-Touch to ZoomHint text for touch.
shouldUsePositiveSpaceLensBooleanfalseSpecify a positive space lens in place of the default negative space lens.
lensComponentFunction(Provided)Specify a custom lens component.

Small Image

{
    src: String, (required)
    srcSet: String,
    sizes: String,
    width: Number, (required if isFluidWidth is not set)
    height: Number, (required if isFluidWidth is not set)
    isFluidWidth: Boolean, (default false)
    alt: String,
    onLoad: Function,
    onError: Function
}

For more information on responsive images, please try these resources:
Responsive Images 101
Responsive Images - The srcset and sizes Attributes

Large Image

{
    src: String, (required)
    srcSet: String,
    sizes: String,
    width: Number, (required)
    height: Number, (required)
    alt: String, (defaults to empty string)
    onLoad: Function,
    onError: Function
}

Support

Please open an issue.

Example Project

git clone https://github.com/ethanselzer/react-image-magnify.git
cd react-image-magnify
npm install
npm run build
cd example
yarn
yarn start

If your default browser does not start automatically, open a new browser window and go to localhost:3000

Development

git clone https://github.com/ethanselzer/react-image-magnify.git
cd react-image-magnify
npm install
npm run #See available commands

The Example Project may be used in development.

To rebuild the source automatically when changes are made, run yarn run build-watch.

Contributing

Please contribute using Github Flow. Create a branch, add commits, and open a pull request.

Attribution

Thanks to the following community members for opening Issues and Pull Requests.

@damien916
@colepatrickturner
@andreatosatto90
@nathanziarek
@hombrew
@smashercosmo
@sk1e
@vidries
@ionutzp
@sbloedel
@spiderbites
@Akarshit
@eddy20vt
@evannoronha
@benjaminadk
@nilsklimm
@m4recek
@yaser-ali-vp
@carlgunderson
@tojvan
@kskonecka
@Coriou

You are awesome! ✨💫

License

MIT

Keywords

FAQs

Package last updated on 16 Feb 2022

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