React.js
Pocket

SlackとかBacklogなどはデフォルトのカラーがありますが(Slackだったら紫、Backlogは緑)、チームカラー設定もできますよね。

そんな感じで、タスク管理やチャットツールなど継続して使うようなものはカラー設定とかできた方が、チーム感でますし、飽きないのかなと思います。

そこで、今回はReactで使えるカラーピッカーライブラリを使って見ました。

React Color

React Colorのサイトを見て分かるようにいろんなタイプのカラーピッカーが用意されています。使い方も簡単でした。ドキュメント通りやればできます。

インストール

npmやyarnで

// npm
npm install react-color --save
// yarn
yarn add react-color

使い方

これもドキュメントに乗ってる通りです。

import React from 'react';
// 好きなものをインポート
import { SketchPicker } from 'react-color';

class Component extends React.Component {

  render() {
    return <SketchPicker />;
  }
}

サンプルコードではSketchのカラーピッカーデザインですが、以下からコンポーネントの種類を選択できます。

include-the-component

Component API

ドキュメントに書かれている通りに書けば、色が変わった時のカラーコード取得や操作などができます。

BlockPickerを例に紹介します。ざっとこんな感じで

// いろいろと省略...
  <BlockPicker
    color={this.props.backgroundColor}
    colors={['#fff', '#D9E3F0', '#F47373']}
    triangle={'hide'}
    onChange={ this.handleChangeBackground.bind(this) }
  />
// いろいろと省略...

color

colorはアクティブなカラーを指定できます。またこれを使うことでカラーの初期値を設定できたりします。

onChange / onChangeComplete

どちらも色が変更されたときに使うものですが、onChangeはドラッグで色を選択するようなものに使い、それ以外はonChangeCompleteでいいんじゃないかなと思います。

SketchカラーピッカーやPhotoshopカラーピッカーにあるようなドラッグで色選択するコンポーネントでonChangeCompleteを使ってしまうと、ドラッグしてマウスを話した瞬間に色が変わるようになってしまいます。ドラッグしてる間もドラッグ位置に応じて色が変わって欲しいですよね。

単純に色をクリックで選ぶだけののものにはonChangeCompleteでいいです。

共通のAPIは以上で、あとはコンポーネントごとに用意されてるものもあります。

Individual APIs

colors

colorsはカラーテーマを用意しているようなコンポーネントの場合、カラーパターンのバリエーションを指定することができます。

triangle

BlockPickerについてる吹き出しのような三角形を表示するか非表示にするか選べます。

さいごに

こんな感じで色設定できるライブラリでした。

あとはStylesとかで色設定したいところに、カラーピッカーのonChangeで取得したカラーコードを指定するように書くと、カラー設定ができるようになります。

Pocket

カテゴリー: タグ: