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;