ColorPicker

colorpicker-1779354183674.tsx

'use client';

import React, { useState } from 'react';

interface Color {
  hex: string;
}

interface Swatch {
  hex: string;
}

const ColorPicker = () => {
  const [color, setColor] = useState<Color>({ hex: '#C9A84C' });
  const [customColor, setCustomColor] = useState<string>('');
  const [showCopied, setShowCopied] = useState<boolean>(false);

  const swatches: Swatch[] = [
    { hex: '#C9A84C' },
    { hex: '#FF69B4' },
    { hex: '#33CC33' },
    { hex: '#6666FF' },
    { hex: '#FFFF66' },
  ];

  const handleColorChange = (newColor: string) => {
    setColor({ hex: newColor });
    setCustomColor(newColor);
  };

  const handleCustomColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setCustomColor(e.target.value);
    if (isValidHex(e.target.value)) {
      handleColorChange(e.target.value);
    }
  };

  const handleCopyClick = () => {
    navigator.clipboard.writeText(color.hex);
    setShowCopied(true);
    setTimeout(() => setShowCopied(false), 2000);
  };

  const isValidHex = (hex: string) => {
    return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(hex);
  };

  return (
    <div className="flex flex-col items-center justify-center h-screen bg-zinc-950">
      <div className="flex flex-col items-center justify-center mb-4">
        <div
          className="w-20 h-20 rounded-full cursor-pointer"
          style={{ backgroundColor: color.hex }}
          onClick={handleCopyClick}
        >
          {showCopied && (
            <div className="absolute text-xs text-gold font-bold transition-opacity duration-2000 opacity-100">
              Copied!
            </div>
          )}
        </div>
        <div className="text-gold text-xs mt-2">Click to copy hex</div>
      </div>
      <div className="flex flex-wrap justify-center mb-4">
        {swatches.map((swatch, index) => (
          <div
            key={index}
            className="w-10 h-10 rounded-full cursor-pointer m-2"
            style={{ backgroundColor: swatch.hex }}
            onClick={() => handleColorChange(swatch.hex)}
          />
        ))}
      </div>
      <input
        type="text"
        className="w-40 h-10 p-2 text-gold bg-zinc-800 border border-gold rounded-lg focus:outline-none focus:ring-gold"
        value={customColor}
        onChange={handleCustomColorChange}
        placeholder="#C9A84C"
      />
      <div className="text-gold text-xs mt-2">
        {color.hex}
      </div>
      <div className="text-gold text-xs mt-2">
        RGB: {hexToRgb(color.hex).r}, {hexToRgb(color.hex).g}, {hexToRgb(color.hex).b}
      </div>
    </div>
  );
};

const hexToRgb = (hex: string) => {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
};

export default ColorPicker;

Component info

CategoryInputs & Forms

Frameworkreact

TierFREE

Copies0

About

Color picker input with hex/rgb display

More from Inputs & Forms

'use client';

import React, { useState } from 'react';

interface RangeSliderProps {
  min: number;
  max: number;
  defaultValue: [number, number];
}

const RangeSlider: React.FC<RangeSliderProps> = ({ min, max, defaultValue }) => {
  const [minVal

RangeSlider

Inputs & Forms

'use client';

import { useState, useEffect } from 'react';

interface Tag {
  id: number;
  name: string;
}

const TagInput = () => {
  const [tags, setTags] = useState<Tag[]>([]);
  const [inputValue, setInputValue] = useState('');
  const [suggest

TagInput

Inputs & Forms

'use client';

import React, { useState } from 'react';

interface File {
  name: string;
  size: number;
  progress: number;
}

const FileUpload = () => {
  const [dragOver, setDragOver] = useState(false);
  const [files, setFiles] = useState<File[]

FileUpload

Inputs & Forms

import React, { useState } from 'react';

const OTPInput = () => {
  const [otp, setOtp] = useState(new Array(6).fill(''));
  const [activeIndex, setActiveIndex] = useState(0);

  const handleChange = (e, index) => {
    const value = e.target.value;

OTPInput

Inputs & Forms