Building a Dynamic Background Color Changer with React, Hooks, Props, and Tailwind CSS
In this project, I created a simple yet powerful background color changer application using React. This project allowed me to practice essential React concepts such as hooks and props, while also leveraging the utility-first CSS framework, Tailwind CSS, to style the components efficiently. Here’s a step-by-step breakdown of the project and the key concepts I learned along the way.
Project Breakdown:
Initial Setup
First, I set up a basic React application using Vite. I created a new component called ColorButton
to handle the button elements dynamically.
Utilizing Hooks
I used the useState
hook to manage the state of the selected background color. Hooks are a fundamental part of React for managing state in functional components.
import { useState } from 'react';
import ColorButton from './components/btn';
function App() {
const [color, setColor] = useState("olive");
const colors = ['red', 'blue', 'green', 'yellow', 'orange', 'indigo'];
return (
<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'>
{colors.map(color => (
<ColorButton color={color} setColor={setColor} />
))}
</div>
</div>
</div>
);
}
export default App;
Creating Reusable Components with Props
The ColorButton
component is a reusable button component that accepts color
and setColor
as props. This makes the button versatile and allows it to dynamically change the background color based on the color passed to it.
function ColorButton({ color, setColor }) {
return (
<button
onClick={() => setColor(color)}
className='outline-none px-4 py-1 rounded-full text-white shadow-lg'
style={{ backgroundColor: color }}
>
{color.charAt(0).toUpperCase() + color.slice(1)}
</button>
);
}
export default ColorButton;
Tailwind CSS for Styling
Tailwind CSS was used to style the buttons and layout quickly. The utility-first approach of Tailwind makes it easy to apply styles directly within the component, promoting a clean and organized codebase.
<button
onClick={() => setColor(color)}
className='outline-none px-4 py-1 rounded-full text-white shadow-lg'
style={{ backgroundColor: color }}
>
{color.charAt(0).toUpperCase() + color.slice(1)}
</button>
Why Color Resets to Olive on Refresh
In this project, I noticed that on refreshing the page, the color resets to olive. This happens because the state is re-initialized every time the component mounts, which means the initial state set by useState("olive")
is applied again. The reconciliation algorithm (Fiber) optimizes updates within a session but does not persist state across page reloads. To maintain the selected color across reloads, I would need to use persistent storage solutions like localStorage
.
Ending Summary:
This project was an excellent exercise in understanding and implementing React concepts such as hooks and props. It also demonstrated how to style components efficiently using Tailwind CSS. Although the color resets to olive upon refreshing, this behavior highlighted the importance of persistent state management in web applications. Overall, this project provided valuable insights into dynamic state management and component-based architecture in React.
Subscribe to my newsletter
Read articles from Rudraksh Tripathi directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by