【React】カラーピッカーの導入！react-colorの使い方をわかりやすく解説！

Webアプリを作っていると、「ユーザーに色を選んでもらいたい」という場面、よくありますよね？

たとえば、こんなケースです。

  • ボタンや背景の色を自由にカスタマイズさせたい
  • グラフの色を選ばせて見た目を変えたい
  • テーマカラーをユーザーに決めてもらいたい

こういった場面で便利なのがカラーピッカー（Color Picker）です。

この記事では、Reactで簡単にカラーピッカーを実装できる人気ライブラリreact-colorの導入方法から活用例まで、サンプルコード付きでわかりやすく解説していきます。

カラーピッカーとは？

カラーピッカーとは？

カラーピッカーとは、色を視覚的に選択できるUIコンポーネントです。

一般的なカラーピッカーは以下のような機能を持っています。

  • パレットから色をクリックして選択する
  • RGBやHEXコードを直接入力する

Reactではこうした機能を簡単に組み込める便利なライブラリがいくつかあります。その中でも有名で使いやすいのがreact-colorであり、以下のような特長があります。

特長内容
コンポーネント形式各種カラーピッカーがReactコンポーネントとして提供されている
複数スタイルをサポートSketch Picker、Chrome Picker、Photoshop Pickerなど多彩なスタイルがある
色のフォーマット対応HEX / RGB / HSL / HSV など幅広いフォーマットに対応
イベントハンドリングがシンプルonChangeイベントで色の変更を簡単に取得できる

また、react-colorには、複数のカラーピッカーコンポーネントが用意されており、好みに応じて選ぶことができます。

カラーピッカー名特徴
SketchPickerPhotoshop風の高機能UI
ChromePickerChrome DevTools風のUI
BlockPicker四角い色ブロックのパレット形式
TwitterPickerTwitter風の軽量な色パレット
CirclePicker丸型の色アイコンで選べるカラーピッカー

react-colorの導入方法

ここでは、Reactアプリにreact-colorをインストールして、カラーピッカーを表示するまでの手順を解説します。

Reactプロジェクトの準備

まずはReactのプロジェクトを作成しましょう。

npx create-react-app my-color-picker-app
cd my-color-picker-app

既にReactアプリがある場合はこの手順は不要です

パッケージのインストール

次に、react-colorパッケージをインストールします。npmまたはyarnのどちらでもOKです。

# npmの場合
npm install react-color

# yarnの場合
yarn add react-color

これで準備は完了です。それでは実装していきましょう。

react-colorの基本的なサンプルコード

react-colorで一番よく使われるカラーピッカーがSketchPickerです。SketchPickerを使ってカラーピッカーを表示しているシンプルなサンプルコードを以下に示します。

// App.js
import React from 'react';
import { SketchPicker } from 'react-color';

class ColorPicker extends React.Component {
  render() {
    return <SketchPicker />;
  }
}

export default ColorPicker;

上記のサンプルコードは最小構成で、カラーピッカーだけが表示されます。選んだ色を「取得」したり「表示」したりはまだしていません。

選択した色を取得・表示するサンプルコード

次に、選択した色をstateに保持し、現在の選択色を表示する機能を加えます。以下のサンプルコードではuseStateで色を保持しています。

// App.js
import { useState } from 'react';
import { SketchPicker } from 'react-color';

const App = () => {
  const [color, setColor] = useState('#FF5733');

  const handleChangeComplete = (newColor) => {
    setColor(newColor.hex); // HEX形式のカラーコード
  };

  return (
    <div style={{ padding: '20px' }}>
      <h3>選択中の色: {color}</h3>

      <SketchPicker color={color} onChange={handleChangeComplete} />

      <div
        style={{
          marginTop: '20px',
          width: '100px',
          height: '100px',
          backgroundColor: color,
          border: '1px solid #ccc',
        }}
      />
    </div>
  );
};

export default App;
  • colorに現在の選択色を格納
  • SketchPickerのonChangeイベントでリアルタイムに色を取得
  • 色コードを<h3>に表示（リアルタイムで変化）
  • 同時にdivの背景色としても反映（リアルタイムで変化）

補足

SketchPickerには、色が変更されたときに実行できるイベントとして、onChangeとonChangeCompleteの2種類のイベントハンドラがあります。それぞれの違いは、イベントが発火するタイミングです。

イベント名発火のタイミング主な用途
onChangeユーザーが色をスライダーなどで調整している途中でもリアルタイムに発火プレビュー表示など、変更を即時反映したいときに便利
onChangeCompleteユーザーが操作を完了したとき（マウスを離したときなど）に一度だけ発火最終的な値を保存したり、APIに送信したいときに使う

カラーピッカーの背景クリックで閉じるサンプルコード

実際のアプリでは、常時カラーピッカーを表示するのではなく「必要なときだけ表示」したい場面も多いですよね。

しかし、SketchPickerにはキャンセルボタン（閉じるボタン）が付いていないため、カラーピッカーを閉じるには別の工夫が必要です。そこで今回は、ピッカーの背後に透明な背景（オーバーレイ）を表示し、そこをクリックするとピッカーが閉じるように実装します。

以下のサンプルコードでは、以下のような動作を実現しています。

  • 「カラーを選択」ボタンをクリック → カラーピッカーが表示される
  • ピッカーの外側をクリック → カラーピッカーが閉じる
    • このような動作を実現するため、ピッカーの背後に透明なdiv（オーバーレイ）を配置し、そこをクリックするとカラーピッカーを閉じるようにしています。
import { useState } from 'react';
import { SketchPicker } from 'react-color';

const App = () => {
  const [color, setColor] = useState('#FF5733');
  const [showPicker, setShowPicker] = useState(false);

  const handleChange = (newColor) => {
    setColor(newColor.hex);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h3>選択中の色: {color}</h3>

      <div style={{ position: 'relative', display: 'inline-block' }}>
        <button onClick={() => setShowPicker(true)}>カラーを選択</button>

        {showPicker && (
          <>
            {/* オーバーレイ：画面全体を覆って、クリックで閉じる */}
            <div
              onClick={() => setShowPicker(false)}
              style={{
                position: 'fixed',
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                backgroundColor: 'transparent',
                zIndex: 1,
              }}
            />

            {/* カラーピッカー：ボタンの横に絶対配置 */}
            <div
              style={{
                position: 'absolute',
                left: '110%',
                top: 0,
                marginLeft: '10px',
                zIndex: 2,
              }}
            >
              <SketchPicker color={color} onChange={handleChange} />
            </div>
          </>
        )}
      </div>

      {/* カラープレビュー */}
      <div
        style={{
          marginTop: '20px',
          width: '100px',
          height: '100px',
          backgroundColor: color,
          border: '1px solid #ccc',
        }}
      />
    </div>
  );
};

export default App;

Material UIを使っている場合は、Popoverを使うと、オーバーレイと閉じる処理が組み込まれていて便利です。以下にMaterial UIを使ったサンプルコードを示します。

import { Box, Button, Popover } from '@mui/material';
import { useState } from 'react';
import { SketchPicker } from 'react-color';

const App = () => {
  const [color, setColor] = useState('#FF5733');
  const [anchorEl, setAnchorEl] = useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const handleChange = (newColor) => {
    setColor(newColor.hex);
  };

  const open = Boolean(anchorEl);

  return (
    <Box sx={{ p: 2 }}>
      <h3>選択中の色: {color}</h3>

      <Button variant="outlined" onClick={handleClick}>
        カラーを選択
      </Button>

      <Popover
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'top', // 上端から表示
          horizontal: 'right', // ボタンの右端に接する
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'left', // カラーピッカーの左端がボタンの右端に接する
        }}
      >
        <SketchPicker color={color} onChange={handleChange} />
      </Popover>

      <Box
        sx={{
          mt: 2,
          width: 100,
          height: 100,
          border: '1px solid #ccc',
          bgcolor: color,
        }}
      />
    </Box>
  );
};

export default App;

本記事のまとめ

この記事ではReactで使える人気ライブラリreact-colorを使って、カラーピッカーを実装する方法を解説しました。

  • カラーピッカーとは何か？
  • react-colorの導入方法
  • 色の取得・表示方法
  • 背景クリックで閉じる実装例
  • ボタンの横にピッカーを表示する工夫

など、実際のWebアプリ開発でも役立つポイントを、サンプルコード付きで詳しく紹介しました。

カラーピッカーをうまく活用すれば、ユーザーにとって「色選びの楽しさ」や「デザインの自由度」を提供できます。ぜひ、自分のReactアプリにも取り入れてみてくださいね！

スポンサーリンク