How to generate a label with random background color

This example demonstrates how to generate a label with random background color using the useRandomColor hook.

Watch the live preview.

App.tsx

import {useRandomColor} from "./useRandomColor";
import {useState} from "react";
import "./styles.css";

interface Label {
    id: string;
    name: string;
    color: string;
}

const Label = ({color, name}: { color: string; name: string }) => {
    return (
        <div style={{backgroundColor: color}} className="label">
            {name}
        </div>
    );
};

export default function App() {
    const {color: labelColor, generateColor} = useRandomColor();
    const [labelName, setLabelName] = useState<string>("Label");
    const [labels, setLabels] = useState<Label[]>([]);

    const addLabel = () => {
        const nameExists = labels.some((tag) => tag.name === labelName);

        if (nameExists) {
            alert("Label name already exists");
            return;
        }

        const newTag = {
            id: labelName + labelColor,
            name: labelName,
            color: labelColor,
        };
        setLabels((prev) => [...prev, newTag]);
        setLabelName("Label");
    };

    return (
        <>
            <Label color={labelColor} name={labelName}/>
            <div className="container">
                <input
                    type="text"
                    onChange={(e) => setLabelName(e.target.value)}
                    value={labelName}
                />
                <button onClick={generateColor}>Generate color</button>
                <button onClick={addLabel}>Add label</button>
            </div>
            <div className="container">
                {labels.map((tag) => {
                    return <Label color={tag.color} name={tag.name} key={tag.id}/>;
                })}
            </div>
        </>
    );
}

useRandomColor.ts

import {useState} from "react";

export const useRandomColor = (initialColor?: string) => {
    const [color, setColor] = useState(initialColor ?? "#000000");

    const generateColor = () => {
        const newColor =
            "#" +
            Math.floor(Math.random() * 16777215)
                .toString(16)
                .padStart(6, "0");

        setColor(newColor);
        return newColor;
    };

    return {color, generateColor};
};

styles.css

.container {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.label {
    padding: 0 0.5rem;
    border-radius: 1rem;
    color: #fff;
    width: fit-content;
}