ライブラリなしでおしゃれなカラーピッカーを実装する【React】

3401 ワード
HTML CSS React tailwindcss HTML テキストリンク

はじめに

<input type="color" />を使うことでカラーピッカー（ユーザーに色を選択させるUI）を簡単に実装できますが．見た目があまりかわいくない…

そう思い，色々試してデザインする方法を編み出したので残しておきます．

結論

inputタグにopacity: 0;を設定することで透明にし，divタグで囲ってデザインする．

実装例

React+TypeScript+TailwindCSSで今回は円形にデザインした実装例です

color.tsx

const Color: React.VFC = () => {
  const [color, setColor] = useState<string>("#000000");

  return (
        <div
          className="w-8 h-8 rounded-full border border-gray-400"
          style={{ background: color }}
        >
          <input
            type="color"
            value={color}
            onChange={(e) => {
              setColor(e.target.value);
            }}
            className="w-full h-full opacity-0"
          />
        </div>
  );
};