🎨

React Color で背景色の選択と文字色の自動設定

2023/01/02に公開約1,900字

やりたいこと

あらかじめ設定した色の選択肢からひとつを選択して背景色として設定し、選択した背景色の明るさによって文字色を白か黒に設定する

使用パッケージ

  • @types/react-color

文字色自動設定の方法

こちらの記事のYUVの方法
https://zenn.dev/mryhryki/articles/2020-11-12-hatena-background-color

コード

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

参考

https://casesandberg.github.io/react-color/
https://zenn.dev/mryhryki/articles/2020-11-12-hatena-background-color

Discussion

ログインするとコメントできます