React Diaries

Dynamic Background Color App Using React: A Fun Mini-Project 🎨✨

Sahana S Acharya's photo
Sahana S Acharya
·

3 min read

Today, I worked on a simple yet interactive project that demonstrates the power of React's state management and dynamic UI updates. This app lets users change the background color of the screen with the click of a button. Let's dive into how it works! 🚀

1. What This App Does 🖌️

This app allows users to:

  • Switch Background Colors: Choose from a variety of colors like red, green, pink, and more.

  • Experience Smooth Transitions: With Tailwind classes and inline styles, the color changes are smooth and visually pleasing. 💫

2. Key Concept: React State 🧠

The backbone of this app is React's useState hook. It helps us keep track of the current background color and update it when a button is clicked.

3. How It Works ⚙️

Here’s the implementation:

App.jsx:

jsxCopy codeimport { useState } from 'react';
import './App.css';

// If there is a change in UI, use state
function App() {
  const [color, setcolor] = useState("black"); // Default color is black

  return (
    <>
      {/* Dynamically set the background color using inline styles */}
      <div
        className='w-full h-screen duration-200'
        style={{ backgroundColor: color }}
      >
        <div className='fixed flex flex-wrap justify-center bottom-12 inset-x-0 px-2'>
          <div className='flex flex-wrap justify-center gap-3 shadow-lg bg-white px-3 py-2 rounded-3xl'>
            {/* Buttons to change the background color */}
            <button
              className='outline-none px-4 text-white rounded-lg'
              style={{ backgroundColor: "red" }}
              onClick={() => setcolor('red')}
            >
              Red
            </button>
            <button
              className='outline-none px-4 text-white rounded-lg'
              style={{ backgroundColor: "green" }}
              onClick={() => setcolor('green')}
            >
              Green
            </button>
            <button
              className='outline-none px-4 text-white rounded-lg'
              style={{ backgroundColor: "pink" }}
              onClick={() => setcolor('pink')}
            >
              Pink
            </button>
            <button
              className='outline-none px-4 text-white rounded-lg'
              style={{ backgroundColor: "brown" }}
              onClick={() => setcolor('brown')}
            >
              Brown
            </button>
            <button
              className='outline-none px-4 text-white rounded-lg'
              style={{ backgroundColor: "blue" }}
              onClick={() => setcolor('blue')}
            >
              Blue
            </button>
          </div>
        </div>
      </div>
    </>
  );
}

export default App;

4. Breaking It Down 🛠️

State Management with useState:

  • The color state holds the current background color.

  • setcolor is a function that updates this state whenever a button is clicked.

Dynamic Styling with style:

  • The div that represents the screen dynamically updates its backgroundColor based on the color state.

Buttons with Inline Styles:

  • Each button has its own background color defined using inline styles.

  • The onClick handler updates the color state to match the button’s color.

5. What Makes It Cool? 😎

  • Interactive UI: Clicking buttons updates the screen in real time!

  • Smooth Transitions: The duration-200 class from Tailwind CSS ensures a smooth transition between colors.

  • Customizable: You can easily add more colors or tweak the button styles.

6. Key Takeaways 📚

  • React State: Perfect for handling UI changes dynamically.

  • Tailwind CSS: Makes styling components simple and intuitive.

  • Inline Styles: Great for setting unique styles directly in JSX.

7. Want to Try? 🌟

If you’re new to React or Tailwind CSS, this is a great project to start with. It’s simple, fun, and teaches you the basics of state management and dynamic styling.

Ready to build something colorful? Dive in and create your own dynamic apps with React and Tailwind! 🌈🎉

useStateReact