Bacancy Technology

Bacancy Technology represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

World wide offices

12+

Years of Experience

Agile Coaches

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

ReactJS

June 21, 2023

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" }} 
></div>

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