こんにちは。
今回は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={ { background: this.state.color } }></div>
</div>
</div>
<div className={styles.containerRight}>
{/* 選択されたカラーがbackgroudに反映されます。 */}
<div className={styles.colorBox} style={ { background: this.state.color } }></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;
こちらにて完了になります！
以下にデモと全体ソースを載せておきます。
まとめ
比較的簡単にカラピッカーの導入ができたかと思います。
機会があればぜひ使用してみてください。
最後までお読みいただきありがとうございます。