RailsのアプリにReact-Colorを導入する

公式サイト

React Color
React Color公式リポジトリ

動作環境

• ruby 2.5.0
• Rails 5.1.5
• react-rails
• webpacker 3.5

react-colorをyarnでインストール

yarn add react-color

componentsディレクトリ配下に新規ファイルを作成

touch app/javascript/components/Colorpicker.js

Colorpicker.jsにColorpickerクラスを定義

import React from "react"
import PropTypes from "prop-types"

import { SketchPicker } from "react-color"

class Colorpicker extends React.Component {
  render() {
    return <React.Fragment>
      <SketchPicker />
    </React.Fragment>
  }
}

Colorpicker.propTypes = {};
export default Colorpicker;

import部分でSketchPickerを指定していますが、ここの指定を変更すれば、カラーピッカーの見た目が変わります。

{}(カール)でSketchpickerと囲む理由としては、デフォルトの状態だとreact-colorからexportされないため。

React Colorで指定できるのは、以下の通り.

• AlphaPicker
• BlockPicker
• ChromePicker
• CirclePicker
• CompactPicker
• GithubPicker
• HuePicker
• MaterialPicker
• PhotoshopPicker
• SketchPicker
• SliderPicker
• SwatchesPicker
• TwitterPicker

Colorpickerコンポーネントを使いたい箇所に以下を追記

<%= react_component('Colorpicker') %>

例

# app/views/articles/_article.html.erb

<%= react_component('Colorpicker') %>

<% obj.each do |article| %>
  <div class="row">
    <div class="col-xs-8 col-xs-offset-2">
      <div class="well well-lg">
          <%= react_component("Article", { title:         article.title,
                                           path:          article_path(article),
                                           description:   truncate(article.description, length: 100),
                                           author:        article.author,
                                           created_at:    article.created_at,
                                           updated_at:    article.updated_at })%>

        <% if article.categories.any? %>
          <p>Categories: <%= render article.categories %></p>
        <% end %>
        <% if logged_in? && (current_user == article.user || current_user.admin?) %>
          <div class="article-actions">
            <%= link_to "Edit this article", edit_article_path(article), class: "btn btn-xs btn-primary" %> 
            <%= link_to "Delete this article", article_path(article), method: :delete, 
                                                data: { confirm: "Are you sure you want to delete this article?" }, 
                                                class: "btn btn-xs btn-danger" %>
          </div>
        <% end %>
      </div>
    </div>
  </div>  
<% end %>

ブラウザで動作確認

ここまでの作業で、カラーピッカーのウィンドウが出現します。

Sketch風

Photoshop風

カラーコードの情報をDBに保存するため、マイグレーションを作成

※ここではユーザーテーブルににカラーコードを紐付ける
bundle exec rails g migration AddColorToUsers

作成したマイグレーションファイルにカラムを追加

# db/migrate/(タイムスタンプ)_add_color_to_users.rb
def change
  add_column :users, :color, :text
end

マイグレーションの実行

bundle exec rails db:migrate

カラーピッカーを表示させたいファイルに以下を追記

※ここでは、ユーザーのプロフィール編集画面に追記している。

# app/views/users/_form.html.erb

<div class="form-group">
  <div class="control-label col-sm-2">
    <%= f.label :color %>
  </div>
  <div class="col-sm-8">
    <%= f.text_field :color, class: "form-control", placeholder: "カラーコードを入力してください。" %>
  </div>
</div>

Strong_paramsにcolorの情報保存を許可させる

# app/controllers/users_controller.rb
def user_params
    params.require(:user).permit(:username, :email, :password, :color)
end

表示領域とデフォルトのカラーを表示させる

# app/views/users/_form.html.erb

<div class="form-group">
  <div class="control-label col-sm-2">
    <%= f.label :color %>
  </div>
  <div class="col-sm-3">
    <%= f.text_field :color, class: "form-control", placeholder: "カラーコードを入力してください。" %>
  </div>
  <div class="col-sm-6">
    <%= react_component('Colorpicker', { color: '#fff' } ) %>
  </div>
</div>

Colorpicker.jsにコンストラクタの設定

constructor(props) {
    super(props);
  }

  handleChange = {}

superは親クラスであるReact.Componentを指しています。

ここではconstructorによって、親クラスのReact.ComponentにColorpickerのpropsが渡されています。

フォームから渡された値をプロパティとして設定

this.props.colorで指定しているcolorには、フォームから指定されたカラーコードの値が渡されます。

 <SketchPicker color={this.props.color}
      /*以下の書き方でもイベントハンドラをbindできる(ES6のアロー関数でbind)*/
      onChange={(event) => this.handleChange(event)} />

参考

http://d.hatena.ne.jp/kanonji/20100415/1271325756

https://qiita.com/iwaseasahi/items/b28f8b91c4638e2c57fd