[React] React Color

 

 

 

 

1️⃣ 라이브러리를 설치한다.

npm install react-color

 

 

Color Picker의 종류는 13가지가 있다.
AlphaPicker, BlockPicker, ChromePicker, CirclePicker, CompactPicker, GithubPicker, HuePicker, MaterialPicker, PhotoshopPicker, SketchPicker, SliderPicker, SwatchesPicker, TwitterPicker

 

 

 

 

 

 

2️⃣ 사용하고자 하는 곳에 React Color의 컴포넌트를 삽입한다.

import { CompactPicker } from "react-color";


export const TextColor = ({ handleTextInfoChange }) => {
  return (
    <>
        <CompactPicker color={currentColor} onChange={handleColorChange} />
    </>
  );
};

 

 

 

 

3️⃣ 컴포넌트 안에 프로퍼티를 설정한다.

color

color는 선택된 색을 제어하는 props이다. 색상의 초기화나 현재 색상을 유지하는 데 사용한다.

 

onChange

색상이 변경될 때 마다 호출되는 함수를 전달한다. 주의할 점은 색이 변경될 때 마다 호출된다는 점이다. 만약 색이 변경되고 단 한 번만 호출하고 싶다면 onChangeComplete를 이용해야 한다.

onChangeComplete

onChangeComplete는 색상 변경이 완료되고 나서 호출하는 함수를 전달한다.

 

 

 

 

import { useState } from "react";
import { CompactPicker } from "react-color";
import { styled } from "styled-components";

export const TextColor = ({ handleTextInfoChange }) => {
  const [currentColor, setCurrentColor] = useState("#000000");
  const [showPicker, setShowPicker] = useState(false);

  const handleColorChange = (color) => {
    setCurrentColor(color.hex);
    handleTextInfoChange({ target: { value: color.hex } }, "textColor");
    setShowPicker(false);
  };

  const handlePickerButton = () => {
    setShowPicker(true);
  };

  return (
    <>
      <TextColorContainer>
        <label htmlFor="textColor">폰트 색상</label>
        <PickerButton
          onClick={handlePickerButton}
          currentColor={currentColor}
        ></PickerButton>
        {showPicker && (
          <Picker>
            <CompactPicker color={currentColor} onChange={handleColorChange} />
          </Picker>
        )}
      </TextColorContainer>
    </>
  );
};

const TextColorContainer = styled.div`
  position: relative;
`;

const PickerButton = styled.button`
  width: 18px;
  height: 18px;
  background-color: ${(props) => props.currentColor};
  margin: 0 160px 0 12px;
  border-radius: 5px;
`;

const Picker = styled.div`
  position: absolute;
  left: 5px;
  top: 30px;
`;