or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

building-blocks.mdcolor-pickers.mdcolor-utilities.mdindex.md
tile.json

tessl/npm-react-color

A Collection of Color Pickers from Sketch, Photoshop, Chrome & more

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-color@2.19.x

To install, run

npx @tessl/cli install tessl/npm-react-color@2.19.0

index.mddocs/

React Color

React Color is a comprehensive React component library that provides 13 different color picker implementations including Sketch, Photoshop, Chrome, and other popular design tool interfaces. The library offers building block components for creating custom color pickers and uses 100% inline styles via ReactCSS for maximum portability.

Package Information

  • Package Name: react-color
  • Package Type: npm
  • Language: JavaScript (React)
  • Installation: npm install react-color

Core Imports

import { SketchPicker } from 'react-color';
import { ChromePicker } from 'react-color';

Multiple component imports:

import { 
  SketchPicker, 
  ChromePicker, 
  BlockPicker,
  CompactPicker 
} from 'react-color';

CommonJS:

const { SketchPicker, ChromePicker } = require('react-color');

Default import (ChromePicker):

import ColorPicker from 'react-color';
// ChromePicker is the default export

Basic Usage

import React, { useState } from 'react';
import { SketchPicker } from 'react-color';

function MyComponent() {
  const [color, setColor] = useState('#ff0000');

  const handleColorChange = (colorResult) => {
    setColor(colorResult.hex);
  };

  return (
    <SketchPicker
      color={color}
      onChange={handleColorChange}
      onChangeComplete={handleColorChange}
    />
  );
}

Architecture

React Color is built around several key components:

  • Color Pickers: 13 pre-built picker components styled after popular design tools
  • Building Blocks: Reusable UI components (Alpha, Hue, Saturation, etc.) for creating custom pickers
  • ColorWrap HOC: Higher-order component that provides color state management and normalization
  • Helper Functions: Utility functions for color validation, conversion, and manipulation
  • Inline Styling: Uses ReactCSS for 100% inline styles, ensuring portability

Capabilities

Color Picker Components

Pre-built color picker components styled after popular design tools. Each picker supports customization through props and provides consistent color change callbacks.

// Main picker components (all wrapped with ColorWrap HOC)
const SketchPicker: React.ComponentType<ColorPickerProps>;
const ChromePicker: React.ComponentType<ColorPickerProps>; // Also default export
const PhotoshopPicker: React.ComponentType<ColorPickerProps>;
const BlockPicker: React.ComponentType<BlockPickerProps>;
const CompactPicker: React.ComponentType<CompactPickerProps>;

Color Picker Components

Building Block Components

Reusable UI components for creating custom color pickers. These components handle specific parts of the color selection process.

const CustomPicker: (Component: React.ComponentType) => React.ComponentType<ColorPickerProps>;
const Alpha: React.ComponentType<AlphaProps>;
const Hue: React.ComponentType<HueProps>;
const Saturation: React.ComponentType<SaturationProps>;

Building Block Components

Color Utilities

Helper functions for color validation, conversion, manipulation, and checkboard pattern generation.

function simpleCheckForValidColor(data: ColorData): ColorData | false;
function toState(data: ColorData, oldHue?: number): ColorState;
function isValidHex(hex: string): boolean;
function getContrastingColor(data: ColorData): string;
function render(c1: string, c2: string, size: number, serverCanvas?: any): string | null;
function get(c1: string, c2: string, size: number, serverCanvas?: any): string | null;

Color Utilities

Types

interface ColorPickerProps {
  color?: string | ColorData;
  onChange?: (color: ColorState, event: Event) => void;
  onChangeComplete?: (color: ColorState, event: Event) => void;
  onSwatchHover?: (color: ColorState, event: Event) => void;
  disableAlpha?: boolean;
  styles?: object;
  className?: string;
}

interface ColorState {
  hsl: { h: number; s: number; l: number; a: number };
  hex: string;
  rgb: { r: number; g: number; b: number; a: number };
  hsv: { h: number; s: number; v: number; a: number };
  oldHue: number;
  source: string;
}

interface ColorData {
  hex?: string;
  r?: number;
  g?: number;
  b?: number;
  a?: number;
  h?: number;
  s?: number;
  l?: number;
  v?: number;
}

interface BlockPickerProps extends ColorPickerProps {
  width?: string | number;
  colors?: string[];
  triangle?: 'top' | 'hide';
}

interface CompactPickerProps extends ColorPickerProps {
  colors?: string[];
}