How to dynamically add/remove classNames in react using material-ui?

Question

How can I dynamically add/remove classes to img tag. Basically I want to change my image automatically after every 2 seconds just like Instagram signup page. But I don't know how to do it using material-ui approach. Here is my code I want to add certain classes and remove them periodically.

and here is my styles I want to add/remove phoneImageAnimation and phoneImageVisible to img after every 2 seconds

phoneImageWrapper: {
  margin: "10px 0 0 151px",
  position: "relative",
},
phoneImage: {
  top: 100,
  left: 0,
  position: "absolute",
  width: 240,
  height: 427,
  opacity: 0,
  visibility: "hidden",
},
phoneImageAnimation: {
  transition: "opacity 1.5s ease-in",
  zIndex: 2,
},
phoneImageVisible: {
  opacity: 1,
  visibility: "visible",
}

user_5146848 · Answer

I think you can use setInterval inside useEffect hook. Like this.

 const [activeIndex, setActiveIndex] = useState(0);

 const images = [
   ,
   ,
   
 ];

  useEffect(() => {
    let timer = setInterval(() => {
      setActiveIndex((prevIndex) => {
        return (prevIndex + 1) % images.length;
      });
    }, 2000);

    return () => {
      clearInterval(timer);
    };
  }, []);

And for animation you can use react-transition-group

I've created an example for you. codepen_link

user_4241562 · Answer

You can use clsx library. This a handy helper which is specifically for this.

Create a state image which rotates between each image (index or name) every 2 seconds

user_3729184 · Answer

You can use setInterval and useState to change the state of the class.

Lets say you have an array of classes you want to change every 2 seconds:

const classes = ['a', 'b', 'c'];

Then, you have a state which is the index of the current className:

const [i, setI] = useState(0);

And on useEffect you start the interval and change the state of the index:

useEffect(() => {
    setInterval(() => setI((i+1) % classes.length), 2000);
});

The only thing you need now is to use the classes array in the className as follows:

And you're done!

How to dynamically add/remove classNames in react using material-ui?

3 Answers