A responsive image zoom component designed for shopping sites.

Overview

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

Prop Type Default Description
smallImage Object N/A Small image information. See Small Image below.
largeImage Object N/A Large image information. See Large Image below.

Optional Styling Props

Prop Type Default Description
className String N/A CSS class applied to root container element.
style Object N/A Style applied to root container element.
imageClassName String N/A CSS class applied to small image element.
imageStyle Object N/A Style applied to small image element.
lensStyle Object N/A Style applied to tinted lens.
enlargedImageContainerClassName String N/A CSS class applied to enlarged image container element.
enlargedImageContainerStyle Object N/A Style applied to enlarged image container element.
enlargedImageClassName String N/A CSS class applied to enlarged image element.
enlargedImageStyle Object N/A Style applied to enlarged image element.

Optional Interaction Props

Prop Type Default Description
fadeDurationInMs Number 300 Milliseconds duration of magnified image fade in/fade out.
hoverDelayInMs Number 250 Milliseconds to delay hover trigger.
hoverOffDelayInMs Number 150 Milliseconds to delay hover-off trigger.
isActivatedOnTouch Boolean false Activate magnification immediately on touch. May impact scrolling.
pressDuration Number 500 Milliseconds to delay long-press activation (long touch).
pressMoveThreshold Number 5 Pixels of movement allowed during long-press activation.

Optional Behavioral Props

Prop Type Default Description
enlargedImagePosition String beside (over for touch) Enlarged image placement. Can be 'beside' or 'over'.
enlargedImageContainerDimensions Object {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.
enlargedImagePortalId String N/A Render 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.
isEnlargedImagePortalEnabledForTouch Boolean false Specify portal rendering should be honored for touch input.
hintComponent Function (Provided) Reference to a component class or functional component. A Default is provided.
shouldHideHintAfterFirstActivation Boolean true Only show hint until the first interaction begins.
isHintEnabled Boolean false Enable hint feature.
hintTextMouse String Hover to Zoom Hint text for mouse.
hintTextTouch String Long-Touch to Zoom Hint text for touch.
shouldUsePositiveSpaceLens Boolean false Specify a positive space lens in place of the default negative space lens.
lensComponent Function (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

Comments
  • Zoom container not visible with slick

    Zoom container not visible with slick

    Zoom image container not visible when using it with slick slider. Reason is overflow:hidden being set on slick items.

    Should have been option to render zoom container inside any container.

    <ReactImageMagnify { ...{ smallImage:{ alt, isFluidWidth: true, src: abc.jpg }, largeImage: { alt, src: abc_large.jpg, width: 1200, height: 1800 }, **renderTo:'#containerId',** }} />

    opened by jitenderchand1 11
  • Custom sizes to lens and enlargedImageContainer

    Custom sizes to lens and enlargedImageContainer

    Is it possibile to set a custom size to the area where the zoomed image is rendered? I tried with no luck some combination of styles via props. I'm also looking for a solution to the same issue but related to lens size.

    Thanks and great work with this component!

    opened by andtos90 9
  • Preserve swipe gesture when used with react-slick

    Preserve swipe gesture when used with react-slick

    Awesome component I'd like to integrate with Slick (react-slick). Everything works as or better than expected, except for the touch swipe gesture that is not passed to Slick.

    Meaning, when I'm rendering this component as Slick slides, I can't swipe using touch gestures (works with the mouse).

    Is there a possible fix for this ? Where should I look for it ? I can't use this component is breaking touch support for Slick which is a must-have for me, but I really want to use it because it's otherwise brilliant.

    opened by Coriou 8
  • Fix bug in React 16.5.0

    Fix bug in React 16.5.0

    • https://github.com/ethanselzer/react-cursor-position/commit/e257bdae1931c47a0a6d2fbff4e46205c1b30c83
    • https://github.com/ethanselzer/react-cursor-position/releases/tag/v3.0.2
    opened by razius 6
  • Add onError prop for images

    Add onError prop for images

    Hello, this PR adds an optional onError prop for small and large images. I followed exactly the approach for adding the onLoad prop which came in a recent PR.

    Cheers!

    opened by spiderbites 6
  • npm run prepublish => ReferenceError: Unknown plugin

    npm run prepublish => ReferenceError: Unknown plugin

    Hi, I have an error when trying to run "prepublish" :

    ReferenceError: Unknown plugin "'transform-es2015-modules-umd'" specified in "base" at 0, attempted to resolve relative to "src" at C:\Node\forks\react-image-magnify\node_modules\babel-core\lib\transformation\file\options\option-manager.js:180:17 at Array.map (native) at Function.normalisePlugins (C:\Node\forks\react-image-magnify\node_modules\babel-core\lib\transformation\file\options\option-manager.js:158:20) at OptionManager.mergeOptions (C:\Node\forks\react-image-magnify\node_modules\babel-core\lib\transformation\file\options\option-manager.js:234:36) at OptionManager.init (C:\Node\forks\react-image-magnify\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12) at File.initOptions (C:\Node\forks\react-image-magnify\node_modules\babel-core\lib\transformation\file\index.js:216:65) at new File (C:\Node\forks\react-image-magnify\node_modules\babel-core\lib\transformation\file\index.js:139:24) at Pipeline.transform (C:\Node\forks\react-image-magnify\node_modules\babel-core\lib\transformation\pipeline.js:46:16) at transform (C:\Node\forks\react-image-magnify\node_modules\babel-cli\lib\babel\util.js:50:22) at Object.compile (C:\Node\forks\react-image-magnify\node_modules\babel-cli\lib\babel\util.js:59:12)

    I have Node v6.9.5 on Windows 10

    Do you know how to resolve the problem ?

    Thank you

    opened by damien916 6
  • Feature request: toggle for inverted lens

    Feature request: toggle for inverted lens

    For our project, we need a slightly different lens layout, which is not possible to realize with the current version of the module.

    Current layout: 4 rectangles (DIV's) with transparent black background color are aranged around the magnified area to darken the rest of the small image.

    What we need: 1 rectangle (DIV) with transparent white background and a box shadow, which fits / overlaps the magnified area of the small image.

    Recommendation: We implement both layouts and make them toggleable.

    I could develop this and send you a pull request...

    Cheers

    opened by nilsklimm 4
  • How to implement events over image container i.e. onClick

    How to implement events over image container i.e. onClick

    Hi, as I was working on a project where I want functionality like when I click on image it'll open a modal and show zoom on hover functionality there (same like on image container hover). So how I call onClick event on that image. Please help! Thanks

    opened by psingh157 4
  • Introduce enlargedImagePosition prop

    Introduce enlargedImagePosition prop

    Hello @ethanselzer I just add optional prop enlargedImagePosition to choose position of enlarged image :

    beside (default for ReactImageMagnify) : enlarged image will be next to the small image
    over (default for ReactImageMagnifyTouch) : enlarged image will be over the small image
    

    Have a nice day :)

    opened by damien916 4
  • Update package.json

    Update package.json

    Please, update package.json to get the last version of "react-cursor-position". From "react-cursor-position": "2.4.0" to "react-cursor-position": "2.4.1"

    I need the last fix about constants.

    Thanks.

    opened by eddy20vt 3
  • Component doesn't activate when cursor is already hovering

    Component doesn't activate when cursor is already hovering

    When I move from another page (with react-router-dom) and the cursor is already hovering this component it ignores it as if it wasn't hovering. To make it work you need to get it out and hover again.

    I also found a possible way to solve it. If the onMouseMove event is triggered automatically changes isActive: true and isPositionOutside: false

    Thank you for your time!

    opened by thefran1412 3
  • Doesn't work properly with slick slider

    Doesn't work properly with slick slider

    It's not a library problem. It is a problem of the combination with slick slider. If the slick slider sets the transition between elements to fade, { ..., fade: true } in the slick props, the zoom only works on the last slide. Otherwise, it works fine.

    opened by juanmanuelcarrera 0
  • Bump express from 4.16.3 to 4.18.2

    Bump express from 4.16.3 to 4.18.2

    Bumps express from 4.16.3 to 4.18.2.

    Release notes

    Sourced from express's releases.

    4.18.2

    4.18.1

    • Fix hanging on large stack of sync routes

    4.18.0

    ... (truncated)

    Changelog

    Sourced from express's changelog.

    4.18.2 / 2022-10-08

    4.18.1 / 2022-04-29

    • Fix hanging on large stack of sync routes

    4.18.0 / 2022-04-25

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump qs and express

    Bump qs and express

    Bumps qs and express. These dependencies needed to be updated together. Updates qs from 6.5.2 to 6.5.3

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so itโ€™s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so itโ€™s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Updates express from 4.16.3 to 4.18.2

    Release notes

    Sourced from express's releases.

    4.18.2

    4.18.1

    • Fix hanging on large stack of sync routes

    4.18.0

    ... (truncated)

    Changelog

    Sourced from express's changelog.

    4.18.2 / 2022-10-08

    4.18.1 / 2022-04-29

    • Fix hanging on large stack of sync routes

    4.18.0 / 2022-04-25

    ... (truncated)

    Commits

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump express from 4.15.3 to 4.18.2 in /example

    Bump express from 4.15.3 to 4.18.2 in /example

    Bumps express from 4.15.3 to 4.18.2.

    Release notes

    Sourced from express's releases.

    4.18.2

    4.18.1

    • Fix hanging on large stack of sync routes

    4.18.0

    ... (truncated)

    Changelog

    Sourced from express's changelog.

    4.18.2 / 2022-10-08

    4.18.1 / 2022-04-29

    • Fix hanging on large stack of sync routes

    4.18.0 / 2022-04-25

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump decode-uri-component from 0.2.0 to 0.2.2 in /example

    Bump decode-uri-component from 0.2.0 to 0.2.2 in /example

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v2.7.4)
  • v2.7.4(Oct 25, 2018)

  • v2.7.3(Sep 29, 2018)

  • v2.7.1(Sep 14, 2018)

  • v2.7.0(Apr 20, 2018)

    Release Notes

    • Specify a positive space lens in place of the default negative space lens
    • Optionally override the default appearance by specifying a custom style
    • For complete control, specify a custom component
    • Resolves #31
    Source code(tar.gz)
    Source code(zip)
  • v2.6.3(Apr 15, 2018)

  • v2.6.2(Apr 5, 2018)

  • v2.6.1(Apr 2, 2018)

    Release Notes

    • Enlarged image alt attribute now defaults to empty string
    • Revised docs to improve overview, api, and demos
    • Improved examples
    Source code(tar.gz)
    Source code(zip)
  • v2.6.0(Mar 22, 2018)

    Release Notes

    • Render enlarged image into an HTML element of your choosing.

    • Ignored for touch input by default but will be honored if isEnlargedImagePortalEnabledForTouch is implemented.

    • Use cases include a scenario where an ancestor element of react-image-magnify implements overflow hidden.

    • Requires React v16

    • Demo

    • Please see example source code for details.

    Source code(tar.gz)
    Source code(zip)
  • v2.5.2(Mar 1, 2018)

  • v2.5.0(Feb 20, 2018)

    Release Notes

    • Dimensions may be express as a percentage or as a number
    • Percentage is based on small image dimension
    • Number is an amount of pixels
    • Resolves #9
    • Demo
    Source code(tar.gz)
    Source code(zip)
  • v2.4.0(Jan 21, 2018)

  • v2.3.3(Dec 26, 2017)

    Release Notes

    • Correct default hint icon vulnerability to image width style leaking in. This was due to a misspelling of the width property.
    Source code(tar.gz)
    Source code(zip)
  • v2.3.2(Nov 28, 2017)

  • v2.3.1(Nov 20, 2017)

    Release Notes

    • Correct possible mis-detection of mouse input type on Firefox 57, which could cause default interaction-hint text to be incorrect for mouse input type.
    Source code(tar.gz)
    Source code(zip)
  • v2.3.0(Nov 20, 2017)

  • v2.2.3(Nov 20, 2017)

  • v2.2.2(Nov 16, 2017)

  • v2.2.0(Oct 31, 2017)

    Overview

    Introduce "hint" instructions feature to explain and encourage interaction.

    Release Notes

    • Disabled by default
    • Different text for mouse and touch environments
    • Default text provided
    • User defined text option
    • Visible only until first activation by default
    • Configure always visible when inactive option
    • User defined component option
    Source code(tar.gz)
    Source code(zip)
  • v2.1.1(Oct 23, 2017)

    Release Notes

    1. Correct possible error with message: "ERROR in ReactImageMagnify.js from UglifyJs Unexpected character '`'
    2. Limit upstream exposure by removing semver match characters from package.json for all dependencies except prop-types.
    3. Fixes https://github.com/ethanselzer/react-image-magnify/issues/15
    4. Thanks to @vidries for opening issue #15 and to @ionutzp for researching the root cause. You guys are awesome!
    Source code(tar.gz)
    Source code(zip)
  • v2.1.0(Oct 19, 2017)

  • v2.0.5(Oct 1, 2017)

  • v2.0.0(Aug 4, 2017)

    Breaking Changes

    Previous to v2.x, touch and mouse environments were supported by separate components. In v2.x touch and mouse are supported by a single component. To upgrade, change imports of ReactImageMagnifyTouch to the default export. Example:

    Change:
    import { ReactImageMagnifyTouch } from 'react-image-magnify';
    To:
    import ReactImageMagnify from 'react-image-magnify';
    

    Release Notes

    Support touch and mouse environments with a single export Correct possible line on shaded lens Upgrade dependencies Support CJS, ES6, and UMD module types

    Source code(tar.gz)
    Source code(zip)
  • v1.8.0(May 28, 2017)

  • v1.7.0(Apr 18, 2017)

    React Image Magnify now supports a basic responsive image story. Both small and large images can be configured with srcSet and sizes attributes. Small images may now be configured to be fluid width. Setting isFluidWidth on the smallImage prop will scale it to the width of the element containing React Image Magnify.

    Source code(tar.gz)
    Source code(zip)
  • v1.6.2(Mar 4, 2017)

  • v1.6.0(Feb 17, 2017)

    Introduce options for position of enlarged image. Options are beside and over. beside places the enlarged image to the right of the small image. over places the enlarged image in the same position as the small image. The default for desktop (mouse) environments is beside and the default for touch environments is over.

    Thanks again to @damien916 for contributing this feature!

    Source code(tar.gz)
    Source code(zip)
  • v1.5.0(Feb 16, 2017)

    Summary

    Add support for applying CSS class names to images and large image container. Add support for applying srcset attribute to images.

    Thanks to @damien916 for contributing this release! โœจ๐Ÿ’ซ

    Source code(tar.gz)
    Source code(zip)
  • v1.3.0(Nov 18, 2016)

    | Prop | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | isActivatedOnTouch | Boolean | No | false | Activate magnification immediately on touch. | | pressDuration | Number | No | 500 | Milliseconds to delay press activation (long touch). | | pressMoveThreshold | Number | No | 5 | Pixels of movement allowed during press activation |

    Source code(tar.gz)
    Source code(zip)
  • v1.2.0(Nov 18, 2016)

๐Ÿ”Ž Medium.com style image zoom for React ๐Ÿ”

react-medium-image-zoom This library is a React.js implementation of Medium.com's image zoom that allows for images to work together for a โ€œzoomingโ€ e

Robert Pearce 1.4k Jan 8, 2023
:eyes: A React component that adds pan and zoom features to SVG

react-svg-pan-zoom react-svg-pan-zoom is a React component that adds pan and zoom features to the SVG images. It helps to display big SVG images in a

Christian 641 Dec 30, 2022
A simple slideshow component built with react that supports slide, fade and zoom effects

React-Slideshow A simple slideshow component built with react that supports slide, fade and zoom effects. For full documentation click here Installati

Femi Oladeji 300 Dec 24, 2022
React library to support easy zoom, pan, pinch on various html dom elements like images and divs

react-zoom-pan-pinch Super fast and light react npm package for zooming, panning and pinching html elements in easy way Demo Docs Features ?? Fast and

Maciej Pyrc 763 Dec 30, 2022
๐ŸŒˆ A React image component. Simple realization of image shadow.

?? react-image-shadow A React image component. Simple realization of image shadow.

null 21 Aug 28, 2022
A react component that renders image tag only if the image source is found without error.

Img-or-alt This react component that will render image tag only if the image source is found without error, otherwise it renders only the alt text in

Radi 1 Dec 14, 2021
A collection of responsive, image magnifying React components for mouse and touch.

A collection of responsive, image magnifying React components for mouse and touch. Useful for product images in ecommerce sites, image galleries, stock photos, etc.

Adam Risberg 297 Dec 28, 2022
Minimalistic image gallery for react. Responsive with all important features and smooth animations.

imager Minimalistic image gallery for REACT. Responsive with all important features and smooth animations. DEMO Desktop Phone Slow internet connection

Gaidadei Vladimir 11 Nov 12, 2022
Recreate one image using the tiles from another image.

Mosaic Recreate one image using the tiles from another image. https://mosaic.constraint.systems About the algorithm The image proccessing works like t

Constraint Systems 12 Sep 29, 2022
React-image-viewer - An image viewer example for react.js

React Image Viewer Demo Installation npm i react-image-viewer-dv Usage import {

Danila Voronkov 10 Nov 17, 2022
React Image and Background Image Preloader and Fade in. Load those images in smooth!

React Image and Background Image Fade Fade in images AND background images easily in React ?? ! Demo and Docs are live! react-image-and-background-ima

Nick Porter 27 Dec 4, 2022
nextjs-image-generation is a POC on how to do server-side image generation.

nextjs-image-generation is a POC on how to do server-side image generation.

Keisuke Nakayama 9 Nov 22, 2022
React Photo Album - a responsive photo gallery component for React

React Photo Album React Photo Album is a responsive photo gallery component for React. React Photo Album supports rows, columns, and masonry layouts.

Igor Danchenko 109 Dec 30, 2022
React carousel image gallery component with thumbnail support ๐Ÿ–ผ

React Carousel Image Gallery Live Demo (try it on mobile for swipe support) linxtion.com/demo/react-image-gallery React image gallery is a React compo

Xiao Lin 3.3k Jan 7, 2023
simple image slider component for react

simple image slider component for react

kimcoder 131 Dec 9, 2022
A React component for magnifying an image within its original container

A React component for magnifying an image within its original container. Zoom behavior can be triggered on click or hover and the zoomed image can be moved by dragging on touch devices and either dragging or pan on hover on non-touch devices. The component supports responsive images, loading placeholders, optional fullscreen zoom on mobile, and more.

Lauren Ashpole 256 Dec 14, 2022
An interactive, multi-layer image component for React

react-layered-image react-layered-image is an interactive, multi-layer image component for React, inspired by the Apple TV layered images. Features Ru

Antoine Llorca 21 Nov 8, 2022
React component for image displaying in full screen

React Image Viewer [email protected] has been rewriten with React Hooks and all apis of it have been redesigned. If you are using [email protected], please

loading... 61 Nov 30, 2022
Cornerstone medical image viewport component for React

react-cornerstone-viewport Cornerstone medical image viewport component for React Documentation and Examples:

cornerstone.js 85 Jan 3, 2023