React Colorblender

A powerful color picker in react.

Installation

npm install react-colorblender

Import

import { ColorPicker } from 'react-colorblender';

Usage

import React from 'react';
import { ColorPicker, useColor } from 'react-colorblender';

import 'react-colorblender/dist/style.css';

export default function Home() {
  const [color, setColor] = useColor('#ff0000');

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

API

ColorPicker

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

Property	Required	Description	Type	Default
color	true	The color value	Color	-
onChange	true	The color change event	(color: Color) => void	-
width	false	The width of the picker	number	250
className	false	The class name of the picker	string	-
hideAlpha	false	Hide the alpha slider	boolean	false

useColor

const [color, setColor] = useColor('#ff0000');

Args	Description	Type
initialColor	The initial color	Color

ColorPickerProps

interface ColorPickerProps {
  width?: number;
  hideAlpha?: boolean;
  hideInput?: boolean;
  color: Color;
  onChange: (color: Color) => void;
  className?: string;
}

Color

import type { HexColor, HsvaColor, RgbaColor } from 'colorblender';

type ColorType = HexColor | RgbaColor | HsvaColor;

class Color {
  hex: HexColor;
  rgb: RgbaColor;
  rgbString: string;
  hsv: HsvaColor;
  hsvString: string;

  constructor(color: ColorType, model: Models);
}

HexColor

type HexColor = string;

RgbaColor

interface RgbaColor {
  r: number;
  g: number;
  b: number;
  a: number;
}

HsvaColor

interface HsvaColor {
  h: number;
  s: number;
  v: number;
  a: number;
}

Roadmap

• [x] Picker with HEX
• [x] Alpha
• [x] RGB
• [x] HSV
• [ ] HSL
• [ ] HWB
• [ ] CMYK
• [ ] XYZ
• [ ] LAB
• [ ] LCH
• [x] Copy color
• [x] Custom css variables
• [ ] Pick color from page
• [ ] Multiple color models with useColor hook
• [ ] And more...

Issues

Please file an issue for bugs, missing documentation, or unexpected behavior.

File an issue

LICENSE

MIT