React Colorの導入と使い方

React Colorというライブラリを利用することで、オシャレでいい感じのカラーピッカーを手軽に導入できます。

インストール

npm install react-color --save

カラーピッカーの表示

表示自体はとても簡単で、下記のように書けばOK。

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

class Component extends React.Component {

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

APIを利用した実用的な使い方

次に、実際に選択された色をどう取得するかです。

import { useState } from 'react';
import { Box, Typography } from '@mui/material';
import { ColorResult, SketchPicker } from 'react-color';

export default function App() {
  const [textColor, setTextColor] = useState<string>("#FFFFFF")
  const changeTextColor = (color: ColorResult) => {
    setTextColor(color.hex)
  }

  return (
    <Box>
      <SketchPicker
        color={textColor}
        onChange={changeTextColor}
      />
      <Typography>{textColor}</Typography>
    </Box>
  )
}

ポイントは下記の2点です。

// カラーコードを代入
color={}

// 選択されたカラーコードを代入するメソッドを呼び出す
onChange={}

初期表示はこんな感じ

カラーピッカーと、その下にデフォルト値として設定した#FFFFFFを表示しています。

色を選択すると…

ピッカーの下に表示しているカラーカードも動的に切り替わるので、textColorにカラーコードが格納されていることがわかりますね。

種類豊富なピッカー

今回紹介した以外にも、様々な見た目のピッカーが揃っていますので、用途やデザインの雰囲気に合わせて使ってみてください。

React Color

Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス