React Colorでカラーピッカーを実装してみよう

React Colorは、Reactでカラーピッカーを実装するライブラリである。

設置方法や APIがシンプルで、Reactでカラーピッカーを実装するなら「React Color」は最有力候補になるだろう。

スポンサーリンク

特徴

API がシンプルであり設置が用意であること、そして、公式サイトでも紹介されているが、さまざまなデザインのピッカーが用意されているのが魅力で、好みや用途に合わせてピッカーのデザインを選ぶことができる。

例えば、RGBを指定で色を選択させるなら基本の「Sketch」を使ったり、逆に決まった色から必ず選択させたい場合は「Github」や「Circle」を使うと言った具合だ。

インストール

npm install react-color --save

TypeScriptの場合は、追加で型定義もインストールしておく。

npm install @types/react-color

使ってみる

インストールしたら、基本の「SketchPicker」コンポーネントを置いてみよう。

import { SketchPicker } from 'react-color';

function SampleComponet() {
  return (
    <SketchPicker/>
  );
}

export  default SampleComponet;

実行すると、こんな感じでよく見るカラーピッカーが出る。

色を選択した時のイベントを受け取る

カラーピッカー上で、色を選択した時のイベントは onChange で受け取ることができ、引数から選択された色を取得する。

function SampleComponet() {

  const handleChange = (color) => {
    console.log(color.hex);    // #49416f
  };

  return (
    <SketchPicker onChange={handleChange}/>
  );
}

スポンサーリンク

ポップアップの実装

一般的にカラーピッカーは、画面に常に表示されることはなく、ボタンなどのクリックによってポップアップで表示するケースが多い。

実は、React Colorにはポップアップでピッカーを表示するAPIは用意されていない。

ただ、公式サイトでもサンプルコードが紹介されているが、ボタンを押したときに、ポップアップでカラーピッカーを表示する場合は、次のようなコードを組めば用意に実装可能だ。

function SampleComponet() {

  //ピッカーをポップアップするためのスタイル
  const popover: {} = {
    position: 'absolute',
    zIndex: '2',
  }

  //ピッカー以外の領域を所をクリックした時に閉じるためのカバー
  const cover: {} = {
    position: 'fixed',
    top: '0px',
    right: '0px',
    bottom: '0px',
    left: '0px',
  }

  return (
    <div>
      <button onClick={ handleClick }>Pick Color</button>
      { displayColorPicker &&
        <div style={ popover }>
          <div style={ cover } onClick={ handleClose }/>
        <SketchPicker/>
        </div> }
    </div>
  );
}

実行するとこんな感じ。

スポンサーリンク

指定した色だけを選択する

ユースケースによっては、RGBで自由に色を選択させるのではなく、決まった色から選択させたいこともあるだろう。

そのようの場合「GithubPicker」または「CirclePicker」が役に立つだろう。これからのコンポーネントは、あらかじめ指定した色のリストをピッカー上に表示し、その中から色を選択させるコンポーネントで、ユーザーはRGB等を指定して自由に色を選択することはできない。

GithubPicker

なぜ Github という名前を冠しているかは不明であるが、GithubPickerは、上のイメージのようにシンプルな色のリストから選択するコンポーネントである。

function SampleComponet() {

  const handleChange = (color) => {
    console.log(color.hex);
  };

  return (
    <GithubPicker onChange={handleChange}/>
  );
}

表示する色を変える

GithubPicker は、デフォルトで次の色が選択候補に表示される。

['#B80000', '#DB3E00', '#FCCB00', '#008B02', '#006B76', '#1273DE', '#004DCF', '#5300EB', '#EB9694', '#FAD0C3', '#FEF3BD', '#C1E1C5', '#BEDADC', '#C4DEF6', '#BED3F3', '#D4C4FB']

任意の色を選択候補に表示させたい場合は colors プロパティに色コードの配列を設定する。

function SampleComponet() {

  const handleChange = (color) => {
    console.log(color.hex);
  };
  
  //選択候補に表示する色の配列
  const colors = ['#000000', '#FFCCCC', '#FFAAAA', '#FF8888', '#FF5555', '#FF3333', '#FF1111']

  return (
    <GithubPicker onChange={handleChange} colors={colors}/>
  );
}

■ 実行結果

CirclePicker

CirclePickerは、その名のとおり色の選択部分が丸いカラーピッカーである。

function SampleComponet() {

  const handleChange = (color) => {
    console.log(color.hex);
  };

  return (
    <CirclePicker onChange={handleChange}/>
  );
}

表示する色を変える

CirclePicker は、デフォルトで次の色が選択候補に表示される。

["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4caf50", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107", "#ff9800", "#ff5722", "#795548", "#607d8b"]

任意の色を選択候補に表示させたい場合は GithubPicker の時と同様に、 colors プロパティに色コードの配列を設定する。

function SampleComponet() {

  const handleChange = (color) => {
    console.log(color.hex);
  };
  
  //選択候補に表示する色の配列
  const colors = ['#000000', '#FFCCCC', '#FFAAAA', '#FF8888', '#FF5555', '#FF3333', '#FF1111']

  return (
    <GithubPicker onChange={handleChange} colors={colors}/>
  );
}

■ 実行結果