Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-color-palette

Package Overview
Dependencies
Maintainers
0
Versions
35
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-color-palette

🎨 Lightweight Color Picker component for React.

  • 7.3.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
38K
decreased by-31.83%
Maintainers
0
Weekly downloads
 
Created
Source

react-color-palette

🎨 Lightweight <ColorPicker /> component for React.

npm downloads size

Installation

yarn

yarn add react-color-palette

npm

npm install react-color-palette

Usage

import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";

export function App() {
  const [color, setColor] = useColor("#561ecb");

  return <ColorPicker color={color} onChange={setColor} />;
}

Examples

Usage rgb() in useColor()

import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";

export function App() {
  const [color, setColor] = useColor("rgb(86 30 203)");

  return <ColorPicker color={color} onChange={setColor} />;
}

Usage <named-color> in useColor()

import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";

export function App() {
  const [color, setColor] = useColor("cyan");

  return <ColorPicker color={color} onChange={setColor} />;
}

Custom Layout

import { Saturation, Hue, useColor } from "react-color-palette";
import "react-color-palette/css";

export function App() {
  const [color, setColor] = useColor("hsl(120 100% 50% / .5)");

  return (
    <div className="custom-layout">
      <Saturation height={300} color={color} onChange={setColor} />
      <Hue color={color} onChange={setColor} />
    </div>
  );
}

HEX input only

import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";

export function App() {
  const [color, setColor] = useColor("#123123");

  return <ColorPicker hideInput={["rgb", "hsv"]} color={color} onChange={setColor} />
}

onChangeComplete optional callback

import { ColorPicker, useColor, type IColor } from "react-color-palette";
import "react-color-palette/css";

export function App() {
  const [color, setColor] = useColor("#123123");

  const onChangeComplete = (color: IColor) => localStorage.setItem("color", color.hex);

  return <ColorPicker hideInput={["rgb", "hsv"]} color={color} onChange={setColor} onChangeComplete={onChangeComplete} />
}

API

<ColorPicker />

The main component, which includes: <Saturation />, <Hue />, <Alpha /> and <Fields /> components for instant use.
If you need a custom layout, then you can use <Saturation />, <Hue /> and <Alpha /> components separately, which are also exported from the library.

PropTypeDefaultDescription
heightnumber200Height of the Saturation component in pixels.
hideAlphabooleanfalseHides the Alpha component.
hideInput(keyof IColor)[] | booleanfalseIf boolean: hides all inputs if true or displays all inputs if false. If array: hides all inputs listed in the array.
colorIColorCurrent color.
disabledbooleanfalseDisables interactivity.
onChangeFunctionСallback function will be fired when color changes.
onChangeCompleteFunctionCallback function will be fired when the interaction is complete with the color picker.

<Saturation />

PropTypeDefaultDescription
heightnumberHeight of the saturation element in pixels.
colorIColorCurrent color.
disabledbooleanfalseDisables interactivity.
onChangeFunctionСallback function will be fired when color changes.
onChangeCompleteFunctionCallback function will be fired when the interaction is complete with the saturation picker.

<Hue />

PropTypeDefaultDescription
colorIColorCurrent color.
disabledbooleanfalseDisables interactivity.
onChangeFunctionСallback function will be fired when color changes.
onChangeCompleteFunctionCallback function will be fired when the interaction is complete with the hue picker.

<Alpha />

PropTypeDefaultDescription
colorIColorCurrent color.
disabledbooleanfalseDisables interactivity.
onChangeFunctionСallback function will be fired when color changes.
onChangeCompleteFunctionCallback function will be fired when the interaction is complete with the alpha picker.

useColor()

ArgTypeDefaultDescription
initialColorTColorInitial сolor.

TColor

Value can be specified using one of the methods listed below:

IColor

FieldType
hexstring
rgbIColorRgb
hsvIColorHsv

IColorRgb

FieldType
rnumber
gnumber
bnumber
anumber

IColorHsv

FieldType
hnumber
snumber
vnumber
anumber

License

Code released under the MIT license.

Keywords

FAQs

Package last updated on 13 Sep 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc