super-spectrum v1.1.0

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

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;