2.7.5 • Published 2 years ago

image-magnify v2.7.5

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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