ColorPalette Component Documentation

Overview

The ColorPalette component is a React class component that generates a random color palette and allows users to copy color codes and search for specific colors.

Features

• Generates a random color palette with 21 colors.
• Copies a selected color to the clipboard.
• Filters colors based on user input.
• Refreshes the color palette.

Dependencies

• React
• CSS file (App.css) for styling

Usage

import React from "react";

import ColorPalette from "./ColorPalette";

import "./App.css";

 

function App() {

    return (

        <div>

            <ColorPalette />

        </div>

    );

}

 

export default App;

 

Component Breakdown

State Properties

• colorList: Stores the generated color palette.
• copiedColorIndex: Stores the index of the last copied color.
• searchInput: Stores user input for filtering colors.
• matchingColors: Stores colors that match the search input.

Lifecycle Methods

• componentDidMount(): Calls generateColorPalette() to initialize the color list when the component mounts.

Methods

generateColorPalette()

Generates 21 random hex color codes and updates the colorList state.

copyColorToClipboard(hexValue, index)

Copies the selected color to the clipboard and updates copiedColorIndex.

handleSearchChange(e)

Filters the color list based on user input, matching predefined colors in colorMapping.

Rendered Elements

• Search Input: Allows users to enter color names for filtering.
• Color List: Displays either the generated or filtered colors.
• Refresh Button: Regenerates a new color palette.

Event Handling

• Clicking on a color copies its hex code to the clipboard.
• Typing in the search input filters colors dynamically.
• Clicking the refresh button regenerates the color list.

Styling

Ensure App.css includes styles for:

• .search-container for search bar styling.
• .container for the color list layout.
• .color for individual color boxes.
• .rect-box for color previews.
• .refresh-btn for the refresh button.

Notes

• The component uses the navigator.clipboard API, which may not work on insecure origins.
• The search functionality relies on a predefined set of color mappings.

Screenshots