Reactで、色を選ぶ入力欄を作る方法

import { useId, useState } from 'react';

export type Preset = { name: string; hex: string };

// "#FF8800" や "ff8800" を "#ff8800" にそろえる。6桁のカラーコードでなければ null
export function normalizeHex(text: string): string | null {
  const m = /^#?([0-9a-f]{6})$/i.exec(text.trim());
  return m ? `#${m[1].toLowerCase()}` : null;
}

type Props = {
  label: string;
  value: string; // 小文字の #rrggbb
  onChange: (hex: string) => void;
  presets?: Preset[];
  name?: string;
};

export function ColorField({ label, value, onChange, presets = [], name }: Props) {
  const id = useId();
  // 入力欄にフォーカスがある間だけ、打ちかけの文字を持つ
  const [draft, setDraft] = useState<string | null>(null);
  const invalid = draft !== null && normalizeHex(draft) === null;

  function handleTextChange(text: string) {
    setDraft(text);
    const hex = normalizeHex(text);
    if (hex) onChange(hex);
  }

  return (
    <fieldset className="color-field">
      <legend>{label}</legend>
      <div className="color-row">
        <input
          id={id}
          type="color"
          name={name}
          value={value}
          aria-label={`${label}を選ぶ`}
          onChange={(e) => onChange(e.target.value)}
        />
        <input
          type="text"
          className="color-code"
          value={draft ?? value}
          aria-label={`${label}のカラーコード`}
          aria-invalid={invalid}
          aria-describedby={`${id}-hint`}
          spellCheck={false}
          onFocus={() => setDraft(value)}
          onChange={(e) => handleTextChange(e.target.value)}
          onBlur={() => setDraft(null)}
        />
      </div>
      <p id={`${id}-hint`} className={invalid ? 'hint hint-invalid' : 'hint'}>
        {invalid ? '#と6桁の16進数で入力してください（例：#00c8e8）' : '#と6桁の16進数で入力できます'}
      </p>
      {presets.length > 0 && (
        <div className="presets">
          {presets.map((p) => {
            const hex = normalizeHex(p.hex) ?? p.hex;
            return (
              <button
                key={hex}
                type="button"
                className="preset"
                style={{ background: hex }}
                aria-label={p.name}
                aria-pressed={value === hex}
                title={`${p.name}（${hex}）`}
                onClick={() => onChange(hex)}
              />
            );
          })}
        </div>
      )}
    </fieldset>
  );
}

import { useState } from 'react';
import { ColorField, type Preset } from './ColorField';

const PRESETS: Preset[] = [
  { name: '水色', hex: '#00C8E8' },
  { name: 'さくら', hex: '#D85878' },
  { name: 'わかば', hex: '#2F9E44' },
  { name: 'すみ', hex: '#1F2A30' },
];

export function App() {
  const [color, setColor] = useState('#00c8e8');
  const [sent, setSent] = useState('');

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const data = new FormData(e.currentTarget);
    setSent(JSON.stringify(Object.fromEntries(data)));
  }

  return (
    <form onSubmit={handleSubmit}>
      <ColorField label="テーマの色" value={color} onChange={setColor} presets={PRESETS} name="theme_color" />
      <div className="preview" style={{ borderColor: color }}>
        <span className="preview-badge" style={{ background: color }} />
        <span className="preview-text">いまの色：<b className="current">{color}</b></span>
      </div>
      <button type="submit">保存</button>
      <output className="sent">{sent}</output>
    </form>
  );
}

何も入れないとき: #000000
value に "#FF8800" を入れる → #ff8800
value に "#f80" を入れる → #ff8800
value に "#00c8e" を入れる → #000000
value に "red" を入れる → #ff0000
value に "rgb(0 128 0)" を入れる → #008000
value に "#ff000080" を入れる → #ff0000
value に "oklch(70% 0.15 200)" を入れる → #00b9c3
value に "nonsense" を入れる → #000000
value に "" を入れる → #000000
'alpha' in input: false、'colorSpace' in input: false
alpha 属性を付けて "#ff000080" を入れる → #ff0000

state: #D85878 / input の value 属性: #D85878 / input.value: #d85878

最初: 色の input #00c8e8 / カラーコード欄「#00c8e8」 / aria-invalid false / 押された色 水色 / いまの色 #00c8e8
「さくら」のボタンを押す: 色の input #d85878 / カラーコード欄「#d85878」 / aria-invalid false / 押された色 さくら / いまの色 #d85878
色の input に fill("#2F9E44"): 色の input #2f9e44 / カラーコード欄「#2f9e44」 / aria-invalid false / 押された色 わかば / いまの色 #2f9e44
色の input に fill("#123456"): 色の input #123456 / カラーコード欄「#123456」 / aria-invalid false / 押された色 なし / いまの色 #123456

カラーコード欄に「#00c8e」まで打つ: 色の input #123456 / カラーコード欄「#00c8e」 / aria-invalid true / 押された色 なし / いまの色 #123456
  説明の文: #と6桁の16進数で入力してください（例：#00c8e8）
続けて「8」を打つ: 色の input #00c8e8 / カラーコード欄「#00c8e8」 / aria-invalid false / 押された色 水色 / いまの色 #00c8e8
「D85878」（# なし、大文字）と打ち直す: 色の input #d85878 / カラーコード欄「D85878」 / aria-invalid false / 押された色 さくら / いまの色 #d85878
「#12」と打ちかけて: 色の input #d85878 / カラーコード欄「#12」 / aria-invalid true / 押された色 さくら / いまの色 #d85878
フォーカスを外す: 色の input #d85878 / カラーコード欄「#d85878」 / aria-invalid false / 押された色 さくら / いまの色 #d85878

最初: value=#000000 onChange=0 change=0
input イベント5回と change イベント1回のあと: value=#550000 onChange=5 change=1
Playwright の fill("#660000") のあと: value=#660000 onChange=6 change=2

// 検証用：React の onChange と、ブラウザの change イベントが呼ばれる回数を数える
import { useEffect, useRef, useState } from 'react';

export function Events() {
  const [color, setColor] = useState('#000000');
  const [reactCount, setReactCount] = useState(0);
  const [nativeCount, setNativeCount] = useState(0);
  const ref = useRef<HTMLInputElement>(null);

  useEffect(() => {
    const el = ref.current!;
    const onNativeChange = () => setNativeCount((n) => n + 1);
    el.addEventListener('change', onNativeChange);
    return () => el.removeEventListener('change', onNativeChange);
  }, []);

  return (
    <div>
      <input
        ref={ref}
        type="color"
        aria-label="色"
        value={color}
        onChange={(e) => {
          setColor(e.target.value);
          setReactCount((n) => n + 1);
        }}
      />
      <p className="log">value={color} onChange={reactCount} change={nativeCount}</p>
    </div>
  );
}

送信した内容: {"theme_color":"#d85878"}