React Animated Fade Between Colors

To switch between colors we need logic to handle that.
For example:-
At the top of your component, import the useState Hook, which helps to define a state.

import { useState } from "react";

Let’s define a state with default color black

const [bgColor, setBgColor] = useState(“black”);

Now, we’ll declare a div container
Transition property will give smooth effect while color changes

<div style={{ backgroundColor:bgColor, transition: "all .5s ease" }} 

Clicking the respective button will change the container background colour

<button onClick={()=>{setBgColor(‘green’)}}>Green</button
<button onClick={()=>{setBgColor(red)}}>Red</button
<button onClick={()=>{setBgColor(blue)}}>Blue</button

Subscribe for
weekly updates