https://github.com/chenbin92/react-image-zoom
Image zoom for React
https://github.com/chenbin92/react-image-zoom
image-zoom react
Last synced: 2 months ago
JSON representation
Image zoom for React
- Host: GitHub
- URL: https://github.com/chenbin92/react-image-zoom
- Owner: chenbin92
- License: mit
- Created: 2018-08-12T10:02:59.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T21:37:31.000Z (over 3 years ago)
- Last Synced: 2025-05-14T09:17:25.961Z (about 1 year ago)
- Topics: image-zoom, react
- Language: JavaScript
- Size: 6.11 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-image-zoom
> Forked from [react-medium-image-zoom](https://github.com/rpearce/react-medium-image-zoom)
This library is a different implementation of [Medium.com's image zoom](https://medium.com/design/image-zoom-on-medium-24d146fc0c20) that allows for a low-res and high-res images to work together for βzoomingβ effects and works regardless of parent elements that have `overflow: hidden` or [parents with transform properties](https://codepen.io/rpearce/pen/MEyOmb). Versions `>=3.0.0` are compatible with [React.js](https://github.com/facebook/react) `>=16.x`; if you need compatibility with `react@^0.14.0 || ^15.0.0`, please use version `2.x`.
You can [view the demo here](https://rpearce.github.io/react-medium-image-zoom/).
## Installation
```
$ npm install --save react-zoom-images
```
## Usage
```js
import ImageZoom from 'react-zoom-images'
function MyComponent(props) {
return (
Some text...
Some text...
)
}
```
| Prop | Type | Required | Default | Details |
| --- | --- | --- | --- | --- |
| `image` | object | yes | none | The original image by default |
| `zoomImage` | object | no | `image` | The image to be used for zooming |
| `originalImage` 
| string | no | `image` | Specify the original image οΌ`image`, `zoomImage`οΌ |
| `zoomTransitionDuration` | number | no | `300ms` | Animation time when opening the zoomImage |
|`unzoomTransitionDuration` | number | no | `300ms` | Animation time when closing the zoomImage |
| `zoomMargin` | number | no | `40` | Pixel number to offset zoomed image from the window |
| `isZoomed` | boolean | no | `false` | For more direct control over the zoom state |
| `shouldHandleZoom` | func | no | `(event) => true` | Pass this callback to intercept a zoom click event and determine whether or not to zoom. Function must return a truthy or falsy value |
| `shouldReplaceImage` | boolean | no | `true` | Once the image has been "zoomed" and downloaded the larger image, this replaces the original `image` with the `zoomImage` |
| `shouldRespectMaxDimension` | boolean | no | `false` | When `true`, don't make the zoomed image's dimensions larger than the original dimensions. Only supported if no `zoomImage` is provided. Will also disable the zooming if the image's is already rendered at its maximum width & height |
| `defaultStyles` | object | no | `{}` | For fine-grained control over all default styles (`zoomContainer`, `overlay`, `image`, `zoomImage`) |
| `onZoom` | func | no | `() => {}` | Pass this callback to respond to a zoom interaction. |
| `onUnzoom` | func | no | `() => {}` | Pass this callback to respond to an unzoom interaction. |
Each one of these image props accepts normal `image` props, for example:
| Prop | Type | Required | Details |
| ------ | ---- | ------- | ------- |
| `src` | string | yes | The source for the image |
| `alt` | string | no | The alt text for the image |
| `className` | string | no | Classes to apply to the image |
| `style` | object | no | Additional styles to apply to the image |
| ... | ... | no | ... |
## Controlled vs Uncontrolled Modes
Similar to how an `` works in React, if the consumer initially chooses to control the `isZoomed` value, then this means the consumer is now responsible for telling the component the value of `isZoomed`. If the consumer instantiates the component with a non-null `isZoomed` value and subsequently does _not_ pass a value for it on updates, then an error will be thrown notifying the consumer that this is a controlled component.
The reverse is true, as well. If the component is instantiated without an `isZoomed` value, then the component will handle its own `isZoomed` state. If a non-null `isZoomed` prop is passed _after_ instantiation, then an error will be thrown notifying the consumer that this component controls its own state.
## Browser Support
Currently, this has only been tested on the latest modern browsers. Pull requests are welcome.
## Development
The source code is located within the `src` directory. Use `$ npm run build` to build the main file as well as the example during development and/or use `$ npm run dev` to have it watch for changes to `src/` and `example/src`.
You can view the built example as a file via `$ open example/build/index.html`, or you can use `$ npm run dev` to start a local dev server and navigate to [http://localhost:3000](http://localhost:3000).
### Storybook
This project's different options and use cases are documented in [storybook](https://github.com/storybooks/storybook). You can use this in dev like so:
* `$ yarn run storybook` (or `$ npm run storybook`)
* navigate to http://localhost:6006
The page should look like this:
## Contributing
1. Check out the [issues](https://github.com/rpearce/react-medium-image-zoom/issues)
1. Fork this repository
1. Clone your fork
1. Check out a feature branch (`$ git checkout -b my-feature`)
1. Make your changes
1. Run `$ yarn run build` to compile your changes and build the example
1. Test your example (see the "Development" section above)
1. Push your branch to your GitHub repo
1. Create a pull request from your branch to this repo's `X-0-stable` branch (where `X` is the correct major version you're targeting)
1. When all is merged, pull down the upstream changes to your master
* `$ git remote add upstream git@github.com:rpearce/react-medium-image-zoom.git`
* `$ git fetch upstream`
* `$ git merge upstream/master`
1. Delete your feature branch
## Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
| [
Cameron Bothner](https://github.com/cbothner)
[π»](https://github.com/rpearce/react-medium-image-zoom/commits?author=cbothner "Code") [π](https://github.com/rpearce/react-medium-image-zoom/commits?author=cbothner "Documentation") [π](https://github.com/rpearce/react-medium-image-zoom/issues?q=author%3Acbothner "Bug reports") [π‘](#example-cbothner "Examples") [π€](#ideas-cbothner "Ideas, Planning, & Feedback") [π](#review-cbothner "Reviewed Pull Requests") [β οΈ](https://github.com/rpearce/react-medium-image-zoom/commits?author=cbothner "Tests") | [
Jeremy Bini](https://github.com/jeremybini)
[π»](https://github.com/rpearce/react-medium-image-zoom/commits?author=jeremybini "Code") [π](https://github.com/rpearce/react-medium-image-zoom/issues?q=author%3Ajeremybini "Bug reports") | [
ismay](https://ismaywolff.nl)
[π](https://github.com/rpearce/react-medium-image-zoom/issues?q=author%3Aismay "Bug reports") [π€](#ideas-ismay "Ideas, Planning, & Feedback") | [
Rajit Singh](https://www.qeek.co)
[π](https://github.com/rpearce/react-medium-image-zoom/issues?q=author%3Arajit "Bug reports") | [
Roberto Saccon](https://github.com/rsaccon)
[π](https://github.com/rpearce/react-medium-image-zoom/issues?q=author%3Arsaccon "Bug reports") | [
wtfdaemon](https://github.com/wtfdaemon)
[π](https://github.com/rpearce/react-medium-image-zoom/issues?q=author%3Awtfdaemon "Bug reports") | [
Robert Pearce](https://robertwpearce.com)
[π»](https://github.com/rpearce/react-medium-image-zoom/commits?author=rpearce "Code") [π¬](#question-rpearce "Answering Questions") [β οΈ](https://github.com/rpearce/react-medium-image-zoom/commits?author=rpearce "Tests") [π](https://github.com/rpearce/react-medium-image-zoom/issues?q=author%3Arpearce "Bug reports") [π‘](#example-rpearce "Examples") [π¨](#design-rpearce "Design") [π](#review-rpearce "Reviewed Pull Requests") [π€](#ideas-rpearce "Ideas, Planning, & Feedback") [π](https://github.com/rpearce/react-medium-image-zoom/commits?author=rpearce "Documentation") |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| [
Josh Sloat](http://www.joshsloat.com)
[π](https://github.com/rpearce/react-medium-image-zoom/issues?q=author%3Ajoshsloat "Bug reports") [π»](https://github.com/rpearce/react-medium-image-zoom/commits?author=joshsloat "Code") [π‘](#example-joshsloat "Examples") [π](#review-joshsloat "Reviewed Pull Requests") [π€](#ideas-joshsloat "Ideas, Planning, & Feedback") [π](https://github.com/rpearce/react-medium-image-zoom/commits?author=joshsloat "Documentation") [π¨](#design-joshsloat "Design") [π¬](#question-joshsloat "Answering Questions") | [
Aswin](https://github.com/aswinckr)
[π¬](#question-aswinckr "Answering Questions") | [
Alex Shelkovskiy](https://github.com/alexshelkov)
[π](https://github.com/rpearce/react-medium-image-zoom/issues?q=author%3Aalexshelkov "Bug reports") | [
Adrian Bindiu](http://adrian-design.com)
[π](https://github.com/rpearce/react-medium-image-zoom/issues?q=author%3ASnowsoul "Bug reports") | [
Kendall Buchanan](https://github.com/kendagriff)
[π](https://github.com/rpearce/react-medium-image-zoom/issues?q=author%3Akendagriff "Bug reports") | [
Kaycee](https://github.com/HippoDippo)
[π»](https://github.com/rpearce/react-medium-image-zoom/commits?author=HippoDippo "Code") | [
Anuj](http://shuffle.do)
[π](https://github.com/rpearce/react-medium-image-zoom/issues?q=author%3Aoyeanuj "Bug reports") [π¬](#question-oyeanuj "Answering Questions") |
| [
Ludwig Frank](https://github.com/ludwigfrank)
[π](https://github.com/rpearce/react-medium-image-zoom/issues?q=author%3Aludwigfrank "Bug reports") [π»](https://github.com/rpearce/react-medium-image-zoom/commits?author=ludwigfrank "Code") |
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!