Super Spectrum

Super Spectrum is an Advanced Color Picker Library.

Features

• Select Colors easily by dragging the selectors on the canvas.
• Use the hue canvas to get all the color ranges.
• The spectrum canvas provides the whole spectrum from black to white to the hue color.
• Set the alpha values for rgb colors by entering in the input.
• Get instant conversion from Hex to Rgba.
• Pick color from page and also get its hex and rgba directly in the input.

Usage

Props

import SuperSpectrum from "super-spectrum";

//props used by SuperSpectrum
<SuperSpectrum
  currentColor="#cd87d4" // Pass the current color to be shown on color picker from parent component
  onChange={(color) => setColor(color)} // Pass a callback function to this prop in order to store the color requried from the color picker
  layout="popup" // Choose between inline or popup layout
  hidePopup={() => showPicker(false)} // This Prop hides the popup when close button is clicked. Pass a function in order to make the color picker disappear along with closing the popup
/>;

Parameter	Type	Description
currentColor	string	Required. Provide the color as as string from the parent Component either in hexcode or rgb format. Important Supported formats include 3 digit hexcode or 6 digit hexcode or rgb or rgba. Ex : "#642001", rgb(200,100,30), rgba(100,224,200,0.5)
onChange	function	Required. Handler function to store the color in the parent component. This function gets called everytime color changes in the component Provide a function. Ex : (color) => setColor(color)
layout	string	Optional. If the color picker needs to be shown as a popup, pass the string "popup" to this prop.
hidePopup	function	Optional. This prop is to hide the popup and color picker if the layout is of popup type. Important This prop is required if the layout chosen is popup type.
showCloseButton	boolean	Optional. This prop will show or hide the close button on the color picker when the layout is set to popup. By default it is false.
customStyles	object	Optional. This prop can take custom styles if they are passed in an object.
disableTransparentOption	boolean	Optional. This prop is used to show or hide the transparent option. It has a default value set to false.

Example

import { useState } from "react";
import SuperSpectrum from "super-spectrum";
import React from "react";
import "./app.css";

const App = () => {
  const [myColor, setColor] = useState("#7c0689");
  const [openPicker, setOpenPicker] = useState(true);

  const handleColorChange = (color) => {
    setColor(color);
  };

  return (
    <>
      <div className="app">{openPicker && <SuperSpectrum currentColor={myColor} onChange={handleColorChange} />}</div>
    </>
  );
};

export default App;