{"_id":"@blacksquareca/react-image-magnify","_rev":"1-3c7a784ef6e390be94cae53f8e3dc1bf","name":"@blacksquareca/react-image-magnify","dist-tags":{"latest":"2.7.5"},"versions":{"2.7.5":{"name":"@blacksquareca/react-image-magnify","version":"2.7.5","description":"A responsive image zoom component designed for shopping sites.","repository":{"type":"git","url":"git+https://github.com/BlackSquareCa/react-image-magnify.git"},"author":{"name":"Jiadong Hu","email":"jiadong.hu@blacksquare.io"},"license":"MIT","bugs":{"url":"https://github.com/ethanselzer/react-image-magnify/issues"},"homepage":"https://github.com/ethanselzer/react-image-magnify","keywords":["react","image","photo","picture","zoom","enlarge","magnify","expand","lens","detail","ecommerce","store","shopping","product"],"main":"dist/ReactImageMagnify.js","module":"dist/es/ReactImageMagnify.js","scripts":{"analyze":"npm run stats && webpack-bundle-analyzer stats.json","build-umd":"webpack -p","build-cjs":"cross-env BABEL_ENV=cjs babel src --out-dir dist","build-es":"babel src --out-dir dist/es","build":"rimraf dist && npm run build-cjs && npm run build-es && npm run build-umd","build-watch":"cross-env BABEL_ENV=cjs babel --watch src --out-dir dist","prepublishOnly":"npm run lint && npm test && npm run build","lint":"eslint \"@(src|test)/**/*.js\"","stats":"webpack -p --profile --json > stats.json","test":"npm run lint && npm run test-only","test-only":"cross-env BABEL_ENV=test mocha --recursive --require babel-core/register --require test/setup test","test-watch":"npm run test-only -- --watch","test-coverage":"rimraf coverage && nyc --reporter=lcov npm run test-only && nyc report","test-ci":"npm run lint && npm run test-coverage && npm run coveralls","coveralls":"nyc report --reporter=text-lcov | coveralls"},"nyc":{"sourceMap":false,"instrument":false,"exclude":["test"]},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.0.1","babel-loader":"^7.1.2","babel-plugin-istanbul":"^4.1.5","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-es2015-modules-umd":"^6.24.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","chai":"4.1.2","coveralls":"3.0.0","cross-env":"^5.0.5","enzyme":"3.6.0","enzyme-adapter-react-16":"1.5.0","eslint":"^4.8.0","eslint-plugin-chai-friendly":"^0.4.0","eslint-plugin-import":"^2.7.0","eslint-plugin-jsx-a11y":"^6.0.2","eslint-plugin-react":"^7.4.0","jsdom":"^12.0.0","mocha":"4.0.0","nyc":"^11.2.1","react":"^16.5.0","react-dom":"^16.5.0","react-test-renderer":"^16.5.0","rimraf":"^2.6.2","sinon":"4.1.2","webpack":"^3.6.0","webpack-bundle-analyzer":"^2.9.0"},"peerDependencies":{"react":"~0.14.9 || ^15.0.0 || ^16.0.0"},"dependencies":{"@blacksquareca/react-cursor-position":"^3.0.4","clamp":"1.0.1","detect-it":"3.0.3","fast-deep-equal":"1.0.0","object-assign":"4.1.1","prop-types":"15.6.0","react-required-if":"1.0.1"},"gitHead":"b48534e60a40a409c10a8ff62e941dbacf0738aa","_id":"@blacksquareca/react-image-magnify@2.7.5","_nodeVersion":"15.14.0","_npmVersion":"7.10.0","dist":{"integrity":"sha512-xcsXZzqCgTbv3XDJHe/aX7FDZRktU7+ezIIBDRJUOI2XvWEk6WuzRFewJZjfX83Kcr2XQshKgwARDUyOQ0t+XQ==","shasum":"5ec70354514972fb62b97a8628c2e0aac8596942","tarball":"https://registry.npmjs.org/@blacksquareca/react-image-magnify/-/react-image-magnify-2.7.5.tgz","fileCount":52,"unpackedSize":319871,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/2KsCRA9TVsSAnZWagAABNAP/2mqZgCxt7E/l6YRli/6\nrcIe0ijxSsjo+17awTx1rI3vEwPCyg3ccL9ryb/j8Yb3pRGbAGJ7UAb11K3v\nYfXHxCK0ptKiK4iEKeuo7FBCFvj969gjHo4LZMv9imWMWE1TQjzzg2f7Fr48\nvu+slqEiE6kuBSBpkX6x3JtahaZe3rYSXwRaCX7SCKfgjY3pPnsrT71Nwsrb\nO5RhynFgs/oCVBu+0oanLUQT0qVjCEe2xjWW5+H0S2/oXYn6gGIPbLeNWewc\n/0CTqrP+ZoqBSPqx/V5GZA7jATMqHJ2TR6VmSXEmzny6O6FcvY9h1Gi7Lwsb\n6m7HpPiIkqfrixyMnTZ5wOpO6fLqZlsSFSl3NUXHM7u9vccMXz3+KHpPoLTR\nl3IsWEX4Ycsb8EEZXxnBvZjrwV9uDrwIobCYvHhza1N02Fe4NwSlRwdubvaI\nmbF6NSkbDmtayxT4+UBFhR/rvaotmQAR2nmoXSDuknACB1dvs3jg6dqgGOIG\nAVUp48VB9dL3sW14XSqjU2iaXko91fzXPR561AscMB4XZHgEKhohlwkPv9if\nH2FbqDUdjz1JOfY/t7SUivMAMM+vWZG4zxXIwIoyNqMOTcGT9L1/4ZLDVD2h\nBSAOSCznszMSlLAu+pSZ6ys70myQRvfKe37fs4RoPzXDxW2xeM6Ct4AR9RFc\nw3SE\r\n=atka\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCG4N0iBsXf7sBHWNWR9uoWVFh+q7uBApvhgPnB3WBaogIhALycIVP2zBIfpEb+cfdmDiC8MLE8liCnMb+EYmloy0Mm"}]},"_npmUser":{"name":"jiadonghu-bsq","email":"jiadong.hu@blacksquare.io"},"directories":{},"maintainers":[{"name":"jiadonghu-bsq","email":"jiadong.hu@blacksquare.io"},{"name":"johncarpenter","email":"john.carpenter@blacksquare.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image-magnify_2.7.5_1627349676182_0.9828245682322712"},"_hasShrinkwrap":false}},"time":{"created":"2021-07-27T01:34:36.125Z","2.7.5":"2021-07-27T01:34:36.361Z","modified":"2022-04-04T19:22:33.301Z"},"maintainers":[{"name":"jiadonghu-bsq","email":"jiadong.hu@blacksquare.io"},{"name":"johncarpenter","email":"john.carpenter@blacksquare.io"}],"description":"A responsive image zoom component designed for shopping sites.","homepage":"https://github.com/ethanselzer/react-image-magnify","keywords":["react","image","photo","picture","zoom","enlarge","magnify","expand","lens","detail","ecommerce","store","shopping","product"],"repository":{"type":"git","url":"git+https://github.com/BlackSquareCa/react-image-magnify.git"},"author":{"name":"Jiadong Hu","email":"jiadong.hu@blacksquare.io"},"bugs":{"url":"https://github.com/ethanselzer/react-image-magnify/issues"},"license":"MIT","readme":"# react-image-magnify\n\nA responsive React image zoom component for touch and mouse.\n\nDesigned for shopping site product detail.\n\nFeatures Include:\n* In-place and side-by-side image enlargement\n* Positive or negative space guide lens options\n* Interaction hint\n* Configurable enlarged image dimensions\n* Optional enlarged image external render\n* Hover intent\n* Long-press gesture\n* Fade transitions\n* Basic react-slick carousel support\n\n## Status\n[![CircleCI](https://img.shields.io/circleci/project/github/ethanselzer/react-image-magnify.svg)](https://circleci.com/gh/ethanselzer/react-image-magnify/tree/master)\n[![Coverage Status](https://coveralls.io/repos/github/ethanselzer/react-image-magnify/badge.svg?branch=master)](https://coveralls.io/github/ethanselzer/react-image-magnify?branch=master)\n[![npm](https://img.shields.io/npm/v/react-image-magnify.svg)](https://www.npmjs.com/package/react-image-magnify)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\n## Demo\nPlease visit the [react-image-magnify demo site](https://ethanselzer.github.io/react-image-magnify/#/)\n\nExperiment with react-image-magnify [live on CodePen](https://codepen.io/ethanselzer/full/oePMNY/).\nUse the Change View button to select editing mode or for different layout options.\nUse the Fork button to save your changes.\n\n\n## Installation\n\n```sh\nnpm install react-image-magnify\n```\n\n## Usage\nIf you are upgrading from v1x to v2x, please see the [release notes](https://github.com/ethanselzer/react-image-magnify/releases/tag/v2.0.0).\n\n```JavaScript\nimport ReactImageMagnify from 'react-image-magnify';\n...\n\n...\n```\nSee more usage examples in the [example project](https://github.com/ethanselzer/react-image-magnify/tree/master/example).\n\n## Required Props\n| Prop | Type | Default | Description |\n|-----------------------------|--------|---------|--------------------------------|\n| smallImage | Object | N/A | Small image information. See [Small Image](#small-image) below.|\n| largeImage | Object | N/A | Large image information. See [Large Image](#large-image) below.|\n## Optional Styling Props\n| Prop | Type | Default | Description |\n|-----------------------------|--------|---------|---------------------------------|\n| className | String | N/A | CSS class applied to root container element. |\n| style | Object | N/A | Style applied to root container element. |\n| imageClassName | String | N/A | CSS class applied to small image element. |\n| imageStyle | Object | N/A | Style applied to small image element. |\n| lensStyle | Object | N/A | Style applied to tinted lens. |\n| enlargedImageContainerClassName| String | N/A | CSS class applied to enlarged image container element. |\n| enlargedImageContainerStyle | Object | N/A | Style applied to enlarged image container element. |\n| enlargedImageClassName | String | N/A | CSS class applied to enlarged image element. |\n| enlargedImageStyle | Object | N/A | Style applied to enlarged image element.|\n## Optional Interaction Props\n| Prop | Type | Default | Description |\n|-----------------------------|--------|-------|---------------------------------|\n| fadeDurationInMs | Number | 300 | Milliseconds duration of magnified image fade in/fade out. |\n| hoverDelayInMs | Number | 250 | Milliseconds to delay hover trigger. |\n| hoverOffDelayInMs | Number | 150 | Milliseconds to delay hover-off trigger. |\n| isActivatedOnTouch | Boolean| false | Activate magnification immediately on touch. May impact scrolling.|\n| pressDuration | Number | 500 | Milliseconds to delay long-press activation (long touch). |\n| pressMoveThreshold | Number | 5 | Pixels of movement allowed during long-press activation. |\n## Optional Behavioral Props\n| Prop | Type | Default | Description |\n|-----------------------------|--------|-------|---------------------------------|\n| enlargedImagePosition | String |beside (over for touch)| Enlarged image placement. Can be 'beside' or 'over'.|\n| 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. |\n| 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.|\n| isEnlargedImagePortalEnabledForTouch | Boolean | false | Specify portal rendering should be honored for touch input. |\n| hintComponent |Function|(Provided)| Reference to a component class or functional component. A Default is provided.|\n| shouldHideHintAfterFirstActivation| Boolean | true | Only show hint until the first interaction begins. |\n| isHintEnabled | Boolean| false | Enable hint feature. |\n| hintTextMouse | String |Hover to Zoom| Hint text for mouse. |\n| hintTextTouch | String |Long-Touch to Zoom| Hint text for touch. |\n| shouldUsePositiveSpaceLens | Boolean| false | Specify a positive space lens in place of the default negative space lens. |\n| lensComponent | Function | (Provided) | Specify a custom lens component. |\n\n### Small Image\n```\n{\n src: String, (required)\n srcSet: String,\n sizes: String,\n width: Number, (required if isFluidWidth is not set)\n height: Number, (required if isFluidWidth is not set)\n isFluidWidth: Boolean, (default false)\n alt: String,\n onLoad: Function,\n onError: Function\n}\n```\nFor more information on responsive images, please try these resources: \n[Responsive Images 101](https://cloudfour.com/thinks/responsive-images-101-definitions/) \n[Responsive Images - The srcset and sizes Attributes](https://bitsofco.de/the-srcset-and-sizes-attributes/)\n\n### Large Image\n```\n{\n src: String, (required)\n srcSet: String,\n sizes: String,\n width: Number, (required)\n height: Number, (required)\n alt: String, (defaults to empty string)\n onLoad: Function,\n onError: Function\n}\n```\n\n## Support\n\nPlease [open an issue](https://github.com/ethanselzer/react-image-magnify/issues).\n\n## Example Project\n```ssh\ngit clone https://github.com/ethanselzer/react-image-magnify.git\ncd react-image-magnify\nnpm install\nnpm run build\ncd example\nyarn\nyarn start\n```\n\nIf your default browser does not start automatically, open a new browser window and go to localhost:3000\n\n## Development\n\n```ssh\ngit clone https://github.com/ethanselzer/react-image-magnify.git\ncd react-image-magnify\nnpm install\nnpm run #See available commands\n```\n\nThe [Example Project](#example-project) may be used in development.\n\nTo rebuild the source automatically when changes are made, run `yarn run build-watch`.\n\n## Contributing\n\nPlease contribute using [Github Flow](https://guides.github.com/introduction/flow/). Create a branch,\nadd commits, and [open a pull request](https://github.com/ethanselzer/react-image-magnify/compare/).\n\n## Attribution\n\nThanks to the following community members for opening Issues and Pull Requests.\n\n@damien916 \n@colepatrickturner \n@andreatosatto90 \n@nathanziarek \n@hombrew \n@smashercosmo \n@sk1e \n@vidries \n@ionutzp \n@sbloedel \n@spiderbites \n@Akarshit \n@eddy20vt \n@evannoronha \n@benjaminadk \n@nilsklimm \n@m4recek \n@yaser-ali-vp \n@carlgunderson \n@tojvan \n@kskonecka \n@Coriou \n\nYou are awesome! ✨💫\n\n## License\n\nMIT\n","readmeFilename":"README.md"}