[ Vite + React ] Color Picker

react에서 color picker를 사용하기 위해서 

react-colorful을 사용

 

https://npmjs.com/package/react-colorful

react-colorful

 

---

Installment

npm install react-colorful

---

Useage

해당 페이지에서 여러가지 color-picker를 사용할 수 있다.

 

https://codesandbox.io/p/sandbox/react-colorful-customization-demo-mq85z?file=%2Fsrc%2FApp.js%3A10%2C10-10%2C24

https://codesandbox.io/p/sandbox/react-colorful-customization-demo-mq85z?file=%2Fsrc%2FApp.js%3A10%2C10-10%2C24

 

클릭한 위치에 colorPicker가 나오게 하고 싶어서 클릭한 x,y좌표 값을 가져와서 해당 위치에 colorPicker가 보이도록 하고,

현재 선택되어있는 색상코드값을 보여주기 위해 커스텀을 했다.

import {HexColorPicker} from "react-colorful";
import './Palette.scss';

export default function Palette({x, y, color, onChange, onClose}: Palette) {
    return (
        <div
            className="palette_continaer"
            style={{
                position: "absolute",
                left: x,
                top: y,
                zIndex: 1000
            }}
        >
            <div
                className="color_picker_container"
            >
                <HexColorPicker color={color} onChange={onChange}/>
                <div className="color_hex">{color}</div>
            </div>
        </div>
    );
}

 

 

div로 감싸면서 colorPicker가 열렸을때는 focus가 되게 하며, 다른 곳을 클릭했을때 onClose가 실행되어야하므로 

해당 컴포넌트가 실행이될때 useEffect로 해당 영역을 focus를 시켜주고,

이후 다른 영역을클릭했을때는 onClose가 실행되도록 한다.

 

TabIndex를 사용하여 div가 focus를 받을 수 있도록 설정

 

이때 focus가 강제로 되면서 focus의 outline이 생기게되어서 outline : none 속성을 추가하여 안생기도록 설정

import {HexColorPicker} from "react-colorful";
import {useEffect, useRef, useState} from "react";
import './Palette.scss';

export default function Palette({x, y, color, onChange, onClose}: Palette) {
    const paletteRef = useRef<HTMLDivElement>(null); 
    const wrapperRef = useRef<HTMLDivElement>(null); 

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
                onClose(); 
            }
        };

        document.addEventListener("mousedown", handleClickOutside);

        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, [onClose]);

    useEffect(() => {
        if (paletteRef.current) {
            paletteRef.current.focus();
        }
    }, []);

    return (
        <div
            className="palette_continaer"
            ref={wrapperRef} 
            tabIndex={0} 
            style={{
                position: "absolute",
                left: x,
                top: y,
                zIndex: 1000
            }}
        >
            <div
                className="color_picker_container"
                ref={paletteRef}
                tabIndex={-1}
            >
                <HexColorPicker color={color} onChange={onChange}/>
                <div className="color_hex">{color}</div>
            </div>
        </div>
    );
}

 

해당 아이템을 클릭했을때 해당 아이템의 색을 변경하기 위해서 클릭한 아이템의 index값을 가져오고,

show값으로 colorPicker를 보여줄지 말지 여부를 컨트롤

    const [picker, setPicker] = useState({show: false, x: 0, y: 0, index: -1});

    const onClickItem = (e: React.MouseEvent, index: number) => {
        setPicker({
            show: true,
            x: event.clientX,
            y: event.clientY,
            index,
        });
    }

 

picker값에 저장된 x,y값을 props로 보내고,

현재 color값과 값이 변경되었을때의 실행될 함수를 onChange로 넘겨주며,

닫을때는 picker값에서 show를 false로 바꿔 닫히도록 했다.

 

변경했을때는 color리스트에서 해당 아이템의 색을 바꿔준다.

    const onChangeColor = (color: string) => {
        const newColors = [...colors]
        newColors[picker.index] = color
        setColors(newColors)
    }

            {
                picker.show && (
                    <Palette x={picker.x} y={picker.y} color={colors[picker.index]} onChange={onChangeColor}
                             onClose={() => setPicker({...picker, show: false})}/>
                )
            }

 

그러면 현재 선택한 위치에 colorPicker가 나오면서 color를 선택할 수 있고 선택한 값이 onChange함수가 실행되면서 색을 바꿔준다.