Build a Simple React JS Interactive Web-Based Color Palette Picker: A Beginner’s Guide

Written by

javascriptdebugged

in

Ever find yourself staring at a screen, trying to decide on the perfect color scheme for a website or design project? It’s a common challenge, and a good color palette can make or break a project. Choosing colors that work well together and evoke the right emotions can be tricky. This tutorial guides you through building a simple, interactive color palette picker using React JS. This project will not only teach you the fundamentals of React but also provide a practical tool you can use for your design endeavors.

Why Build a Color Palette Picker?

Creating a color palette picker is a fantastic way to learn React. It involves core React concepts like state management, event handling, and component composition. Furthermore, it’s a project with tangible benefits. You’ll have a tool to experiment with color combinations, save your favorite palettes, and use them in your future projects. This hands-on approach is ideal for beginners because it allows you to see immediate results and understand how different React components interact.

What You’ll Learn

In this tutorial, you’ll learn:

  • Setting up a React project using Create React App.
  • Creating and managing component state.
  • Handling user input (color selection).
  • Rendering dynamic content based on state.
  • Styling components using inline styles.

Prerequisites

Before you start, make sure you have the following:

  • Basic knowledge of HTML, CSS, and JavaScript.
  • Node.js and npm (or yarn) installed on your computer.
  • A code editor (like VS Code, Sublime Text, or Atom).

Step-by-Step Guide

1. Setting Up Your React Project

First, let’s create a new React project using Create React App. Open your terminal and run the following command:

npx create-react-app color-palette-picker
cd color-palette-picker

This command creates a new React app named “color-palette-picker” and navigates you into the project directory. Now, start the development server:

npm start

This will open your app in your web browser, typically at http://localhost:3000. You should see the default React app screen.

2. Project Structure and File Setup

Now, let’s clean up the default project structure a bit. Open your code editor and navigate to the “src” folder. Delete the following files: App.css, App.test.js, index.css, and logo.svg. Then, modify App.js and index.js to reflect the following structure:

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
  
);

App.js:

import React, { useState } from 'react';

function App() {
  const [colors, setColors] = useState(['#FF5733', '#33FF57', '#5733FF', '#FF33F7']); // Initial color palette

  return (
    <div className="app-container">
      <h1>Color Palette Picker</h1>
      <div className="color-palette">
        {colors.map((color, index) => (
          <div
            key={index}
            className="color-box"
            style={{ backgroundColor: color }}
          ></div>
        ))}
      </div>
    </div>
  );
}

export default App;

index.css:

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
}

#root {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

With these changes, we’ve set up the basic structure of the application and removed unnecessary files. The App.js file now contains a simple component that displays a color palette.

3. Creating the ColorBox Component

Let’s create a reusable component for each color box. Create a new file named ColorBox.js inside the “src” folder. This component will render a single color box with its background color.

ColorBox.js:

import React from 'react';

function ColorBox({ color }) {
  return (
    <div className="color-box" style={{ backgroundColor: color }}></div>
  );
}

export default ColorBox;

Now, modify App.js to import and use the ColorBox component:

App.js (Updated):

import React, { useState } from 'react';
import ColorBox from './ColorBox'; // Import the ColorBox component

function App() {
  const [colors, setColors] = useState(['#FF5733', '#33FF57', '#5733FF', '#FF33F7']); // Initial color palette

  return (
    <div className="app-container">
      <h1>Color Palette Picker</h1>
      <div className="color-palette">
        {colors.map((color, index) => (
          <ColorBox key={index} color={color} /> // Use the ColorBox component
        ))}
      </div>
    </div>
  );
}

export default App;

This refactoring makes the code cleaner and more organized. Each color box is now rendered using the ColorBox component. Don’t forget to add some basic styling to index.css or a new CSS file to make the color boxes visible and properly styled. Here’s an example:

index.css (Updated):

/* Existing styles */

.app-container {
  text-align: center;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.color-palette {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

.color-box {
  width: 80px;
  height: 80px;
  margin: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

.color-box:hover {
  transform: scale(1.05);
}

4. Adding Color Selection Functionality

Let’s add functionality to select a color. We’ll start by adding a state variable to hold the currently selected color and a function to update it when a color box is clicked. Modify App.js to include this functionality:

App.js (Updated):

import React, { useState } from 'react';
import ColorBox from './ColorBox';

function App() {
  const [colors, setColors] = useState(['#FF5733', '#33FF57', '#5733FF', '#FF33F7']);
  const [selectedColor, setSelectedColor] = useState(null); // New state variable

  const handleColorClick = (color) => {
    setSelectedColor(color);
  };

  return (
    <div className="app-container">
      <h1>Color Palette Picker</h1>
      <div className="color-palette">
        {colors.map((color, index) => (
          <ColorBox
            key={index}
            color={color}
            onClick={() => handleColorClick(color)} // Add onClick handler
            style={{
              border: selectedColor === color ? '2px solid black' : 'none', // Highlight selected color
            }}
          />
        ))}
      </div>
      {selectedColor && (
        <p>Selected Color: {selectedColor}</p> // Display selected color
      )}
    </div>
  );
}

export default App;

In this updated code:

  • We added a selectedColor state variable to store the currently selected color.
  • We created a handleColorClick function to update the selectedColor state when a color box is clicked.
  • We added an onClick handler to each ColorBox, passing the color value to the handleColorClick function.
  • We added a conditional rendering to display the selected color below the palette.
  • Added inline styling to the color boxes to indicate selection with a border.

5. Implementing a Color Picker Input

To make the color palette picker more interactive, let’s add an input field where users can enter a hex code to add a new color to the palette. Modify App.js to include a text input and a button to add colors:

App.js (Updated):

import React, { useState } from 'react';
import ColorBox from './ColorBox';

function App() {
  const [colors, setColors] = useState(['#FF5733', '#33FF57', '#5733FF', '#FF33F7']);
  const [selectedColor, setSelectedColor] = useState(null);
  const [newColor, setNewColor] = useState(''); // New state variable for the input value

  const handleColorClick = (color) => {
    setSelectedColor(color);
  };

  const handleInputChange = (event) => {
    setNewColor(event.target.value);
  };

  const handleAddColor = () => {
    if (newColor && /^#([0-9A-Fa-f]{3}){1,2}$/.test(newColor)) { // Basic hex code validation
      setColors([...colors, newColor]);
      setNewColor(''); // Clear the input field after adding the color
    }
  };

  return (
    <div className="app-container">
      <h1>Color Palette Picker</h1>
      <div className="color-palette">
        {colors.map((color, index) => (
          <ColorBox
            key={index}
            color={color}
            onClick={() => handleColorClick(color)}
            style={{
              border: selectedColor === color ? '2px solid black' : 'none',
            }}
          />
        ))}
      </div>
      {selectedColor && <p>Selected Color: {selectedColor}</p>}
      <div className="color-input">
        <input
          type="text"
          value={newColor}
          onChange={handleInputChange}
          placeholder="Enter hex code (e.g., #FFFFFF)"
        />
        <button onClick={handleAddColor}>Add Color</button>
      </div>
    </div>
  );
}

export default App;

In this code:

  • We added a newColor state variable to hold the value of the input field.
  • We created a handleInputChange function to update the newColor state when the input value changes.
  • We created a handleAddColor function to add the new color to the colors array when the button is clicked.
  • We’ve added a basic regex validation to check if the input is a valid hex code.
  • We rendered an input field and a button to add colors to the palette.

Add the following CSS styles to your index.css or a separate CSS file for the input elements:

.color-input {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.color-input input {
  padding: 8px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.color-input button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

6. Adding a Clear Palette Button

To provide more functionality, let’s add a button to clear the color palette. This is a great exercise in state management. Add a button and the corresponding event handler to App.js:

App.js (Updated):

import React, { useState } from 'react';
import ColorBox from './ColorBox';

function App() {
  const [colors, setColors] = useState(['#FF5733', '#33FF57', '#5733FF', '#FF33F7']);
  const [selectedColor, setSelectedColor] = useState(null);
  const [newColor, setNewColor] = useState('');

  const handleColorClick = (color) => {
    setSelectedColor(color);
  };

  const handleInputChange = (event) => {
    setNewColor(event.target.value);
  };

  const handleAddColor = () => {
    if (newColor && /^#([0-9A-Fa-f]{3}){1,2}$/.test(newColor)) {
      setColors([...colors, newColor]);
      setNewColor('');
    }
  };

  const handleClearPalette = () => {
    setColors([]); // Reset the colors array to an empty array
    setSelectedColor(null); // Clear the selected color
  };

  return (
    <div className="app-container">
      <h1>Color Palette Picker</h1>
      <div className="color-palette">
        {colors.map((color, index) => (
          <ColorBox
            key={index}
            color={color}
            onClick={() => handleColorClick(color)}
            style={{
              border: selectedColor === color ? '2px solid black' : 'none',
            }}
          />
        ))}
      </div>
      {selectedColor && <p>Selected Color: {selectedColor}</p>}
      <div className="color-input">
        <input
          type="text"
          value={newColor}
          onChange={handleInputChange}
          placeholder="Enter hex code (e.g., #FFFFFF)"
        />
        <button onClick={handleAddColor}>Add Color</button>
      </div>
      <button className="clear-button" onClick={handleClearPalette}>Clear Palette</button> // Add the clear button
    </div>
  );
}

export default App;

Add the following CSS styles to index.css (or your separate CSS file):

.clear-button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

This addition provides the user with a convenient way to reset the color palette.

7. Enhancements and Advanced Features (Optional)

Here are some ideas to further enhance your color palette picker:

  • Color Contrast Checker: Add a feature to check the contrast ratio between the selected color and a background color. This is crucial for accessibility.
  • Color Saving: Implement a feature to save the selected color palette to local storage, so users can retrieve their palettes later.
  • Color Palette Generation: Integrate a color palette generator that suggests harmonious color combinations.
  • More Color Formats: Allow users to input colors in different formats (e.g., RGB, HSL)
  • Drag and Drop Reordering: Implement drag-and-drop functionality to allow users to reorder the colors in the palette.

8. Common Mistakes and How to Fix Them

  • Incorrect State Updates: Make sure you are updating state correctly using the setColors function and spreading the existing state (e.g., setColors([...colors, newColor])). Failing to do so can lead to unexpected behavior and data loss.
  • Missing Key Props: When rendering lists of components (like the color boxes), always provide a unique key prop to each element. This helps React efficiently update the DOM.
  • Incorrect Event Handling: Ensure that event handlers are correctly bound and that you are passing the necessary data to the handler functions.
  • CSS Styling Issues: Double-check your CSS to ensure that styles are applied correctly and that there are no conflicts. Use browser developer tools to debug CSS issues.
  • Hex Code Validation Errors: Ensure your hex code validation regex correctly handles all valid hex code formats (3 and 6 characters) and that it’s correctly implemented.

Key Takeaways

This tutorial has provided a solid foundation for building a color palette picker with React. By creating this project, you’ve gained practical experience with state management, component composition, event handling, and conditional rendering – essential concepts in React development. Remember to practice these concepts by experimenting with the code and adding features. The ability to build interactive user interfaces is a valuable skill in modern web development. This project is a stepping stone to more complex React applications. Congratulations on completing this project!

FAQ

  1. Can I use a different color library? Yes, you can use any color library you prefer. Libraries like chroma.js or colorjs.io can provide more advanced color manipulation and conversion features.
  2. How can I deploy this app? You can deploy your React app to platforms like Netlify, Vercel, or GitHub Pages. These platforms provide easy deployment options for static websites.
  3. How do I handle errors in the input field? You can add error handling to the input field by checking the validity of the hex code and displaying an error message to the user if it’s invalid.
  4. How do I add different color formats? To support different color formats (RGB, HSL), you’ll need to parse the user input, convert it to a hex code, and then update the color state. You can use libraries like chroma.js or colorjs.io for color format conversions.
  5. Can I make the color palette responsive? Yes, you can make the color palette responsive by using CSS media queries to adjust the layout and size of the color boxes on different screen sizes.

With this foundation, the possibilities for creating more sophisticated and functional color tools are vast. Continue exploring and experimenting with different features and functionalities. The knowledge and experience gained will undoubtedly serve you well in future React projects. Keep building, keep learning, and enjoy the process of creating!

More posts