search

malaman / react-image-zoom

React component for desktop browsers for image zoom on mouse hover
http://malaman.github.io/react-image-zoom/example/index.html
MIT License
188 stars 29 forks source link

dynamic image load #1

Closed ssomnoremac closed 8 years ago

ssomnoremac commented 8 years ago

Thanks for making this public. Would you accept a PR for enabling dynamic image loading?

https://github.com/ssomnoremac/react-image-zoom/pull/1

malaman commented 8 years ago

Hi, you can youse react key property to update image

<ReactImageZoom 
  width={400}
  height={250}
  zoomWidth={500}
  img='http://example.com/assets/jmg/1.jpg'
  key='http://example.com/assets/jmg/1.jpg'
/>

But in general i think it is good to have possibility to change image without key manipulation. Could you update your fork and create PR with something like:

componentWillReceiveProps(nextProps) {
  if (this.props.img !== nextProps.img) {
    this.imageZoom.kill();
    this.imageZoom = new ImageZoom(this.refs.container, nextProps);
  }
 }

img change verification prevents unnecessary kill/create actions of js-image-zoom in case of parent rerenders without changing actual image source.

malaman commented 8 years ago

In current master this was implemented. I will publish version 0.1.0 of package till 03.10

ssomnoremac commented 8 years ago

@malaman , sorry, got caught up in something else.