Replacing Images via a reference method

[lukebrandonfarrell]

This PR adds the ability to easily replace images with a new reference method:

const collageRef = useRef(null);

<DynamicCollage
  ref={collageRef}
  ...

collageRef.current.replaceImage("https://picsum.photos/200", m, i);

Here is a video demo of it in action:

https://user-images.githubusercontent.com/18139277/107499831-5a088280-6b8d-11eb-8d55-1f36e0dbe895.mov

@jasimawan @harbolaez since you both are working with this feature in your projects, let me know your thoughts !

[jasimawan]

Looks good 😍, let me test it and I will let you know about it. @lukebrandonfarrell

[lukebrandonfarrell]

Thanks @jasimawan let me know, and I'll merge

[harbolaez]

lgtm! Just minor changes, what you think of adding the below code to as a callback of the setState:

this.setState({ images: replacedImages }, () => {
    const targetImage = this.refs[`image${m}-${i}`];
    targetImage.calculateImageSize();
    targetImage.calculateImagePosition();
  });

when an image with a different size is added, it does not calculate the image with the right sizes.

[jasimawan]

Just checked it on simulator as well as on real device. Working perfectly. @lukebrandonfarrell

[lukebrandonfarrell]

lgtm! Just minor changes, what you think of adding the below code to as a callback of the setState:

this.setState({ images: replacedImages }, () => {
    const targetImage = this.refs[`image${m}-${i}`];
    targetImage.calculateImageSize();
    targetImage.calculateImagePosition();
  });

when an image with a different size is added, it does not calculate the image with the right sizes.

@harbolaez Nice catch! 😮 I'll add your suggestion then merge

[lukebrandonfarrell]

Will be released in version 3.3.0