A new version of the jSuites JavaScript Color Picker plugin is available here.
JavaScript Color Picker v5
React color picker
Take a look at this example in CodeSandbox: working example
ColorPicker component
import { useRef, useEffect } from "react";
import jSuites from "jsuites";
import "jsuites/dist/jsuites.css";
export default function ColorPicker({ options }) {
const colorPickerRef = useRef(null);
useEffect(() => {
jSuites.color(colorPickerRef.current, options);
}, [options]);
return <input ref={colorPickerRef} />;
}
Component usage
import { useState } from "react";
import ColorPicker from "./ColorPicker";
export default function App() {
const [color, setColor] = useState("");
const handleColorPickerChange = (element, color) => {
setColor(color);
};
return (
<>
<h3>Color picker example:</h3>
<ColorPicker
options={{
value: color,
onchange: handleColorPickerChange,
fullscreen: true
}}
/>
</>
);
}