Reactでカラーピッカーの導入

ブログメインビジュアル

こんにちは。
今回はReactのライブラリである「react-color」を使用してカラーピッカーの実装をしたいと思います。
カラーピッカーは比較的に簡単に導入できて便利かと思います。
参考になると幸いです!

目次

やりたいこと

今回はカラー選択バーをクリックしカラーピッカーの表示、また選択したカラーを動的にレンダリングするようにしていきます!

ディレクトリ構造

/src
  App.js
  ColorPicker.js
  ColorPicker.module.css
  index.js

事前準備

React環境の構築方法に関しては、こちらをご覧ください。
またyarnの使用をしています。

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

$ yarn add react-color

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

カラーピッカーの表示

まずは、ColorPickerコンポーネントを作成していきます。 ColorPicker.js

import React from 'react';
import { SketchPicker } from 'react-color';

class ColorPicker extends React.Component {

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

export default ColorPicker

基本設定はこれだけです。
この状態で画面にカラーピッカー表示されてることが確認できるかと思います!

ちなみに今回は、SketchPickerを使用していますが、様々な種類のカラーピッカーも使用することが可能みたいです。
興味のある方は、公式のreact-colorをご覧ください!

選択したカラーの表示

次に選択バーをクリック後にカラーピッカーの表示、また選択したカラー内容が反映されるようにしたいと思います!

ColorPicker.js

import React from 'react';
import { SketchPicker } from 'react-color';
import styles from './ColorPicker.module.css';


class ColorPicker extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      open: false,
      color: '#FFF',
    }
  }

  handleChange = color => {
    // 第一引数のcolorで選択したカラー情報を取得することができます。
    this.setState({ color: color.hex })
  }

  handleOpen = () => {
    this.setState({ open: !this.state.open })
  }

  handleClose = () => {
    this.setState({ open: false })
  }

  render() {
    return (
      <>
        <div className={styles.container}>
          <div className={styles.containerLeft}>
            <div className={styles.bar} onClick={this.handleOpen}>
              <div className={styles.barLeft}>カラーを選択する</div>
              <div className={styles.barRight} style=></div>
            </div>
          </div>
          <div className={styles.containerRight}>
            {/* 選択されたカラーがbackgroudに反映されます。 */}
            <div className={styles.colorBox} style=></div>
          </div>
        </div>
        {this.state.open && (
          <div className={styles.pikker}>
            {/* 背景クリック用の領域確保 */}
            <div className={styles.pikkerBack} onClick={this.handleClose}></div>
            <SketchPicker
              color={ this.state.color }
              onChange={ this.handleChange }
            />
          </div>
        )}
      </>
    );
  }
}

export default ColorPicker

スタイルも調整します!

ColorPicker.module.css


.container {
  width: 1000px;
  height: 700px;
  background: #f3f3f3;
  display: flex;
  padding: 30px;
  box-sizing: border-box;
  align-items: center;
}

.containerLeft {
  padding-right: 50px;
}

.bar {
  background: #fff;
  width: 400px;
  height: 40px;
  border: 1px solid #dedede;
  border-radius: 2px;
  display: flex;
  cursor: pointer;
}

.barLeft {
  flex: 1;
  padding: 10px;
}

.barRight {
  height: 100%;
  border-left: 1px solid #dedede;
  width: 40px;
}

.colorBox {
  background: #fff;
  border: 1px solid #dedede;
  width: 400px;
  height: 400px;
}

.pikker {
  position: absolute;
  top: 380px;
  left: 30px;
}

.pikkerBack {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

一つ注意点として、今回使用しているSketchPickerにはキャンセルボタンがありません。なので別途、背景用のエレメントを用意しクリック時にカラーピッカーが閉じることができるようにすることをオススメします。今回だとpikkerBackを用意し背景クリックでピッカーが閉じるようにしています。

最後に

App.jsからColorPickerを読み込みます。

App.js

import ColorPicker from "./ColorPicker";

function App() {
  return (
    <ColorPicker></ColorPicker>
  );
}

export default App;

こちらにて完了になります!

以下にデモと全体ソースを載せておきます。

まとめ

比較的簡単にカラピッカーの導入ができたかと思います。 機会があればぜひ使用してみてください。
最後までお読みいただきありがとうございます。

この記事を書いた人 kito エンジニアになるために愛知から上京しました。
TOP