react-color-palette - npm explorer

🎨 Lightweight <ColorPicker /> component for React.

Installation

$3

sh
yarn add react-color-palette

$3

sh
npm install react-color-palette


Usage

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

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

return ; }`

`Examples`

`$3`

tsx
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";
export function App() {
  const [color, setColor] = useColor("rgb(86 30 203)");

return ; }`

`$3`

tsx
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";
export function App() {
  const [color, setColor] = useColor("cyan");

return ; }`

`$3`

tsx
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 (
    

      
      
    

  );
}

$3

tsx
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";
export function App() {
  const [color, setColor] = useColor("#123123");

return }`

`$3`

tsx
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 }`

`API`

`$3`


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.

















































      Prop     Type     Default     Description   
      height     number     200     Height of the Saturation component in pixels.   
      hideAlpha     boolean     false     Hides the Alpha component.   
      hideInput     (keyof IColor)[] | boolean     false     If boolean: hides all inputs if true or displays all inputs if false. If array: hides all inputs listed in the array.   
      color     IColor         Current color.   
      disabled     boolean     false     Disables interactivity.   
      onChange     Function         Сallback function will be fired when color changes.   
      onChangeComplete     Function         Callback function will be fired when the interaction is complete with the color picker.   
$3





































      Prop     Type     Default     Description   
      height     number         Height of the saturation element in pixels.   
      color     IColor         Current color.   
      disabled     boolean     false     Disables interactivity.   
      onChange     Function         Сallback function will be fired when color changes.   
      onChangeComplete     Function         Callback function will be fired when the interaction is complete with the saturation picker.   
$3































      Prop     Type     Default     Description   
      color     IColor         Current color.   
      disabled     boolean     false     Disables interactivity.   
      onChange     Function         Сallback function will be fired when color changes.   
      onChangeComplete     Function         Callback function will be fired when the interaction is complete with the hue picker.   
$3































      Prop     Type     Default     Description   
      color     IColor         Current color.   
      disabled     boolean     false     Disables interactivity.   
      onChange     Function         Сallback function will be fired when color changes.   
      onChangeComplete     Function         Callback function will be fired when the interaction is complete with the alpha picker.   
$3













      Arg     Type     Default     Description   
      initialColor     TColor         Initial сolor.   
$3

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

Prop	Type	Default	Description
height	number	200	Height of the Saturation component in pixels.
hideAlpha	boolean	false	Hides the Alpha component.
hideInput	(keyof IColor)[] \| boolean	false	If boolean: hides all inputs if true or displays all inputs if false. If array: hides all inputs listed in the array.
color	IColor		Current color.
disabled	boolean	false	Disables interactivity.
onChange	Function		Сallback function will be fired when color changes.
onChangeComplete	Function		Callback function will be fired when the interaction is complete with the color picker.

Prop	Type	Default	Description
height	number		Height of the saturation element in pixels.
color	IColor		Current color.
disabled	boolean	false	Disables interactivity.
onChange	Function		Сallback function will be fired when color changes.
onChangeComplete	Function		Callback function will be fired when the interaction is complete with the saturation picker.

Prop	Type	Default	Description
color	IColor		Current color.
disabled	boolean	false	Disables interactivity.
onChange	Function		Сallback function will be fired when color changes.
onChangeComplete	Function		Callback function will be fired when the interaction is complete with the hue picker.

Prop	Type	Default	Description
color	IColor		Current color.
disabled	boolean	false	Disables interactivity.
onChange	Function		Сallback function will be fired when color changes.
onChangeComplete	Function		Callback function will be fired when the interaction is complete with the alpha picker.

Arg	Type	Default	Description
initialColor	TColor		Initial сolor.

- -- sRGB color space:hsl(), hwb() or rgb()`

$3

Field	Type
hex	string
rgb	IColorRgb
hsv	IColorHsv

$3

Field	Type
r	number
g	number
b	number
a	number

$3

Field	Type
h	number
s	number
v	number
a	number

License

Code released under the MIT license.

🎨 Lightweight <ColorPicker /> component for React.

Installation

$3

sh
yarn add react-color-palette

$3

sh
npm install react-color-palette


Usage

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

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

return ; }`

`Examples`

`$3`

tsx
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";
export function App() {
  const [color, setColor] = useColor("rgb(86 30 203)");

return ; }`

`$3`

tsx
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";
export function App() {
  const [color, setColor] = useColor("cyan");

return ; }`

`$3`

tsx
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 (
    

      
      
    

  );
}

$3

tsx
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";
export function App() {
  const [color, setColor] = useColor("#123123");

return }`

`$3`

tsx
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 }`

`API`

`$3`


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.

















































      Prop     Type     Default     Description   
      height     number     200     Height of the Saturation component in pixels.   
      hideAlpha     boolean     false     Hides the Alpha component.   
      hideInput     (keyof IColor)[] | boolean     false     If boolean: hides all inputs if true or displays all inputs if false. If array: hides all inputs listed in the array.   
      color     IColor         Current color.   
      disabled     boolean     false     Disables interactivity.   
      onChange     Function         Сallback function will be fired when color changes.   
      onChangeComplete     Function         Callback function will be fired when the interaction is complete with the color picker.   
$3





































      Prop     Type     Default     Description   
      height     number         Height of the saturation element in pixels.   
      color     IColor         Current color.   
      disabled     boolean     false     Disables interactivity.   
      onChange     Function         Сallback function will be fired when color changes.   
      onChangeComplete     Function         Callback function will be fired when the interaction is complete with the saturation picker.   
$3































      Prop     Type     Default     Description   
      color     IColor         Current color.   
      disabled     boolean     false     Disables interactivity.   
      onChange     Function         Сallback function will be fired when color changes.   
      onChangeComplete     Function         Callback function will be fired when the interaction is complete with the hue picker.   
$3































      Prop     Type     Default     Description   
      color     IColor         Current color.   
      disabled     boolean     false     Disables interactivity.   
      onChange     Function         Сallback function will be fired when color changes.   
      onChangeComplete     Function         Callback function will be fired when the interaction is complete with the alpha picker.   
$3













      Arg     Type     Default     Description   
      initialColor     TColor         Initial сolor.   
$3

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

Prop	Type	Default	Description
height	number	200	Height of the Saturation component in pixels.
hideAlpha	boolean	false	Hides the Alpha component.
hideInput	(keyof IColor)[] \| boolean	false	If boolean: hides all inputs if true or displays all inputs if false. If array: hides all inputs listed in the array.
color	IColor		Current color.
disabled	boolean	false	Disables interactivity.
onChange	Function		Сallback function will be fired when color changes.
onChangeComplete	Function		Callback function will be fired when the interaction is complete with the color picker.

Prop	Type	Default	Description
height	number		Height of the saturation element in pixels.
color	IColor		Current color.
disabled	boolean	false	Disables interactivity.
onChange	Function		Сallback function will be fired when color changes.
onChangeComplete	Function		Callback function will be fired when the interaction is complete with the saturation picker.

Prop	Type	Default	Description
color	IColor		Current color.
disabled	boolean	false	Disables interactivity.
onChange	Function		Сallback function will be fired when color changes.
onChangeComplete	Function		Callback function will be fired when the interaction is complete with the hue picker.

Prop	Type	Default	Description
color	IColor		Current color.
disabled	boolean	false	Disables interactivity.
onChange	Function		Сallback function will be fired when color changes.
onChangeComplete	Function		Callback function will be fired when the interaction is complete with the alpha picker.

Arg	Type	Default	Description
initialColor	TColor		Initial сolor.

- -- sRGB color space:hsl(), hwb() or rgb()`

$3

Field	Type
hex	string
rgb	IColorRgb
hsv	IColorHsv

$3

Field	Type
r	number
g	number
b	number
a	number

$3

Field	Type
h	number
s	number
v	number
a	number

License

Code released under the MIT license.