🎨
React Color で背景色の選択と文字色の自動設定
やりたいこと
あらかじめ設定した色の選択肢からひとつを選択して背景色として設定し、選択した背景色の明るさによって文字色を白か黒に設定する
使用パッケージ
- @types/react-color
文字色自動設定の方法
こちらの記事のYUVの方法
コード
import { useEffect, useState } from 'react';
import { CirclePicker, ColorChangeHandler } from 'react-color';
import { Box, Center, Stack, Text } from '@chakra-ui/react';
// あらかじめ設定した色の選択肢
const COLORS = [
'#f44336',
'#e91e63',
'#9c27b0',
'#673ab7',
'#3f51b5',
'#2196f3',
'#03a9f4',
'#00bcd4',
'#009688',
'#4caf50',
'#8bc34a',
'#cddc39',
'#ffeb3b',
'#ffc107',
'#ff9800',
'#ff5722',
'#795548',
'#607d8b',
];
const ColorPicker = () => {
const [pickedBgColor, setPickedBgColor] = useState('#f44336');
const [textColor, setTextColor] = useState('#ffffff');
const handleOnChangeBgColor: ColorChangeHandler = (color) => {
const colorHex = color.hex;
setPickedBgColor(colorHex);
};
// 選択した背景色の明るさによって文字色を白か黒に設定する
useEffect(() => {
const brightness =
parseInt(pickedBgColor.substring(1, 3), 16) * 0.299 +
parseInt(pickedBgColor.substring(3, 5), 16) * 0.587 +
parseInt(pickedBgColor.substring(5, 7), 16) * 0.114;
const color = brightness >= 180 ? '#000000' : '#ffffff';
setTextColor(color);
}, [pickedBgColor]);
return (
<Box p={3}>
<Center>
<Stack alignItems={'center'} spacing={3}>
<CirclePicker onChange={handleOnChangeBgColor} colors={COLORS} />
<Center borderRadius={5} bgColor={pickedBgColor} h={50} w='100%'>
<Text color={textColor}>{pickedBgColor}</Text>
</Center>
</Stack>
</Center>
</Box>
);
};
export default ColorPicker;
UI
参考
Discussion