• JavaScript Color Picker

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
      }}
    />
  );
}