search

benmneb / mui-image

⚛ React component to display images as per the Material Design guidelines. For apps using Material-UI v5.
https://mui-image.surge.sh
ISC License
50 stars 14 forks source link

How do I force an <Image> to show animations when 'src' attribute has been changed? #6

Closed FlandiaYingman closed 2 years ago

FlandiaYingman commented 2 years ago

Hi! I noticed that the Demo (https://mui-image.surge.sh/) uses the following to change to a new image

setShowPhoto(false);
setCurrentPhoto(newPhoto);
setTimeout(() => {
  setShowPhoto(true);
}, 100);

I am wondering whether it is the only way to achieve this, because it doesn't look very elegant...

benmneb commented 2 years ago

I'm sure it's not the only way, but it's the easiest way I could think of. Don't forget the {showPhoto && <Image ... /> } conditional rendering bit as well. (Though it's better to use a ternary operator than what I did here.)

FlandiaYingman commented 2 years ago

@benmneb Thanks!