Color Generator - React Fundamental Project 9

---

Project Summary

Color Generator is a React-based web application that allows users to input a color and instantly generate a visually appealing palette of shades and tints derived from that color. The project not only demonstrates core React concepts (state, props, event handling, component structure) but also provides a practical tool for designers and developers. It integrates useful libraries such as values.js for color manipulations and react-toastify for notifications. Users can copy any generated color's hex code with one click, making the app ideal for quick design workflows.

• Live-Demo: https://color-generator-arnob.netlify.app/

---

Table of Contents

1. Project Summary
2. Live Demo
3. Features
4. Technologies Used
5. Project Structure
6. Setup & Installation
7. Usage Instructions
8. Component Walkthrough
   • App Component
   • Form Component
   • ColorList Component
   • SingleColor Component
9. Key Functionality & API
10. Styling and Responsive Design
11. Code Examples
12. Learning Outcomes
13. Keywords
14. Conclusion

---

Features

• Input your favorite color as a hex code or use the color picker.
• Instantly generate a set of tints and shades for any color.
• Copy any color's hex code to the clipboard with a single click.
• Responsive, modern grid layout for generated colors.
• Toast notifications for success and error events.
• Clean, component-based React project structure for easy learning and extension.

---

Technologies Used

• React (Functional components, Hooks)
• JavaScript (ES6+)
• values.js (Color manipulation)
• react-toastify (Toast notifications)
• CSS Grid (Responsive color display)
• Clipboard API (Copy to clipboard)

---

Project Structure

Color-Generator--React-Fundamental-Project-9/
│
├── public/
│   └── index.html
|
├── src/
│   ├── components/
│   │   ├── Form.jsx
│   │   ├── ColorList.jsx
│   │   └── SingleColor.jsx
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
│
├── package.json
└── README.md   <-- (You are here)

---

Setup & Installation

1. Clone the repository:

   git clone https://github.com/arnobt78/Color-Generator--React-Fundamental-Project-9.git
   cd Color-Generator--React-Fundamental-Project-9

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

   The app will be available at http://localhost:5173 (or as specified by Vite).

---

Usage Instructions

1. Enter a color value in hex format (e.g., #f15025) or use the color picker input.
2. Click the submit button to generate a palette of tints and shades.
3. Click on any color in the generated grid to copy its hex code to your clipboard.
4. If you input an invalid color, a toast notification will display the error.
5. Use the palette in your design projects by pasting the copied hex codes wherever needed.

---

Component Walkthrough

App Component

• Purpose: Root component managing state for the input color and generated palette.
• Responsibilities:
  • Holds color state using React hooks.
  • Handles submission to generate a new palette using values.js.
  • Passes color data to child components (Form, ColorList).
  • Catches invalid color errors and triggers toast notifications.

---

Form Component

• Purpose: Collects user input (color hex code or via color picker).
• Responsibilities:
  • Maintains input state.
  • Handles user input change and form submission.
  • Communicates the submitted color back to the App component.

---

ColorList Component

• Purpose: Displays the generated list of colors as a responsive grid.
• Responsibilities:
  • Receives the list of color objects as props.
  • Iterates and renders each color using the SingleColor component.
  • Assigns a unique key to each color (usually based on index or hex value).

---

SingleColor Component

• Purpose: Visual representation of a single shade/tint.
• Responsibilities:
  • Renders the color block with appropriate background using inline CSS.
  • Displays the hex value and the color’s weight (percentage).
  • Handles click event to copy the hex code to clipboard via the Clipboard API.
  • Shows feedback (toast) upon successful copy.

---

Key Functionality & API

Color Generation with values.js

• values.js is a library that generates tints and shades from a base color.
• Usage example:

  import Values from "values.js";
  const colors = new Values("#f15025").all(10); // 10% steps

• Each color object contains properties like hex, weight, etc.

---

Notifications with react-toastify

• Import in App.jsx:

  import { ToastContainer, toast } from "react-toastify";
  import "react-toastify/dist/ReactToastify.css";

• Show a toast:

  toast.success("Color copied!");
  toast.error("Invalid color code.");

• Place <ToastContainer position="top-center" /> in your main layout.

---

Copy to Clipboard

• In SingleColor.jsx:

  async function copyToClipboard(text) {
    try {
      await navigator.clipboard.writeText(text);
      toast.success("Copied!");
    } catch (error) {
      toast.error("Failed to copy.");
    }
  }

• On color block click: copyToClipboard(hexValue)

---

Styling and Responsive Design

• Main color grid uses CSS Grid:

  .colors {
    min-height: calc(100vh - 160px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(223.33px, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(96px, 1fr));
  }

• The layout adapts to various screen sizes, ensuring a pleasant experience on desktop and mobile.

---

Code Examples

Example: Generate Colors on Submit

// App.jsx (core logic)
import Values from "values.js";
import { toast } from "react-toastify";
const [color, setColor] = useState('');
const [colors, setColors] = useState([]);

const handleSubmit = (e) => {
  e.preventDefault();
  try {
    const colorsArray = new Values(color).all(10);
    setColors(colorsArray);
  } catch (error) {
    toast.error("Invalid color value!");
  }
};

---

Example: Copy to Clipboard

// SingleColor.jsx
const handleCopy = async () => {
  try {
    await navigator.clipboard.writeText(hex);
    toast.success("Copied to clipboard!");
  } catch {
    toast.error("Copy failed!");
  }
};

---

Learning Outcomes

• Understand and use React functional components and hooks for state management.
• Learn how to manage props and component communication.
• Integrate third-party libraries (values.js, react-toastify) in React apps.
• Implement copy-to-clipboard functionality with the Clipboard API.
• Practice building modular, maintainable UI with a clear separation of concerns.
• Apply responsive CSS Grid layouts for modern web apps.

---

Keywords

React, Color Generator, Shades and Tints, values.js, react-toastify, Color Picker, Copy to Clipboard, CSS Grid, Functional Components, useState, useEffect, JavaScript ES6, Web Development, Frontend, UI, Hooks, Notifications, Responsive Design.

---

Conclusion

This project serves as an excellent introduction to React fundamentals, demonstrating how to build a real-world tool with modular components, external libraries, and modern web APIs. Whether you are learning React or need a handy color palette generator for your design workflow, this project offers both educational value and practical utility. Feel free to fork, modify, and extend the project with new features such as saving favorite palettes, exporting palettes, or integrating with other design tools!

---