React color picker
Color picker working example
ColorPicker component
import React, { useRef, useEffect } from "react";
import jSuites from "jsuites";
import "../node_modules/jsuites/dist/jsuites.css";
export default function ColorPicker({ options, ...properties }) {
const colorPickerRef = useRef(null);
const jsuitesColorPickerRef = useRef(null);
useEffect(() => {
if (!jsuitesColorPickerRef.current) {
jsuitesColorPickerRef.current = jSuites.color(
colorPickerRef.current,
options
);
} else {
jsuitesColorPickerRef.current.setOptions(options);
}
}, [options]);
return <input ref={colorPickerRef} {...properties} />;
}
Component usage
import React, { useState } from "react";
import ColorPicker from "./ColorPicker";
export default function App() {
const [color, setColor] = useState("");
const handleColorPickerChange = (element, color) => {
setColor(color);
};
return (
<ColorPicker
options={{
value: color,
onchange: handleColorPickerChange,
closeOnChange: false
}}
/>
);
}