tessl/npm-react-color

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Building Block Components

Name: tessl/npm-react-color
Author: tessl

Reusable UI components for creating custom color pickers. These components handle specific parts of the color selection process and can be combined to build custom picker interfaces.

Capabilities

CustomPicker (ColorWrap HOC)

Higher-order component that wraps any component with color state management, normalization, and change handling. This is the foundation for all color picker components.

/**
 * Higher-order component for creating custom color pickers
 * @param Component - React component to wrap with color functionality
 * @returns Enhanced component with color state management
 */
const CustomPicker: (Component: React.ComponentType) => React.ComponentType<ColorPickerProps>;

Usage Example:

import React from 'react';
import { CustomPicker, Alpha, Hue } from 'react-color';

const MyCustomPicker = ({ hex, hsl, onChange }) => (
  <div>
    <div style={{ background: hex, width: 100, height: 100 }} />
    <Hue hsl={hsl} onChange={onChange} />
    <Alpha rgb={hsl} hsl={hsl} onChange={onChange} />
  </div>
);

export default CustomPicker(MyCustomPicker);

Alpha

Alpha channel (transparency) slider component that allows users to control the opacity of the selected color.

/**
 * Alpha channel slider component
 * @param props - Alpha component configuration
 */
const Alpha: React.ComponentType<AlphaProps>;

interface AlphaProps {
  /** RGB color values */
  rgb: { r: number; g: number; b: number; a: number };
  /** HSL color values */
  hsl: { h: number; s: number; l: number; a: number };
  /** Custom pointer component */
  pointer?: React.ComponentType;
  /** Rendering functions for custom elements */
  renderers?: object;
  /** Color change callback */
  onChange: (color: ColorState) => void;
  /** Slider direction */
  direction?: 'horizontal' | 'vertical';
  /** Custom styles */
  style?: object;
}

Usage Example:

import { Alpha } from 'react-color';

<Alpha
  rgb={{ r: 255, g: 0, b: 0, a: 0.5 }}
  hsl={{ h: 0, s: 1, l: 0.5, a: 0.5 }}
  onChange={handleColorChange}
  direction="horizontal"
/>

Hue

Hue slider component that allows users to select the hue (color) value on the color spectrum.

/**
 * Hue slider component
 * @param props - Hue component configuration
 */
const Hue: React.ComponentType<HueProps>;

interface HueProps {
  /** HSL color values */
  hsl: { h: number; s: number; l: number; a: number };
  /** Custom pointer component */
  pointer?: React.ComponentType;
  /** Color change callback */
  onChange: (color: ColorState) => void;
  /** Slider direction */
  direction?: 'horizontal' | 'vertical';
  /** Custom styles */
  style?: object;
}

Usage Example:

import { Hue } from 'react-color';

<Hue
  hsl={{ h: 180, s: 1, l: 0.5, a: 1 }}
  onChange={handleColorChange}
  direction="horizontal"
/>

Saturation

Saturation and lightness picker area component that provides a 2D interface for selecting color saturation and lightness values.

/**
 * Saturation/lightness picker area
 * @param props - Saturation component configuration
 */
const Saturation: React.ComponentType<SaturationProps>;

interface SaturationProps {
  /** HSL color values */
  hsl: { h: number; s: number; l: number; a: number };
  /** HSV color values */
  hsv: { h: number; s: number; v: number; a: number };
  /** Custom pointer component */
  pointer?: React.ComponentType;
  /** Color change callback */
  onChange: (color: ColorState) => void;
  /** Custom styles */
  style?: object;
}

Usage Example:

import { Saturation } from 'react-color';

<Saturation
  hsl={{ h: 180, s: 0.5, l: 0.5, a: 1 }}
  hsv={{ h: 180, s: 1, v: 1, a: 1 }}
  onChange={handleColorChange}
/>

Checkboard

Transparent background pattern component that displays a checkboard pattern behind transparent colors to visualize alpha transparency.

/**
 * Transparent background checkboard pattern
 * @param props - Checkboard component configuration
 */
const Checkboard: React.ComponentType<CheckboardProps>;

interface CheckboardProps {
  /** Border radius for rounded corners */
  borderRadius?: string;
  /** Size of checkboard squares */
  size?: number;
  /** Color of white squares */
  white?: string;
  /** Color of grey squares */
  grey?: string;
  /** Custom rendering functions */
  renderers?: object;
}

Usage Example:

import { Checkboard } from 'react-color';

<div style={{ position: 'relative', width: 100, height: 100 }}>
  <Checkboard borderRadius="4px" />
  <div style={{ 
    position: 'absolute', 
    top: 0, 
    left: 0, 
    right: 0, 
    bottom: 0, 
    background: 'rgba(255, 0, 0, 0.5)' 
  }} />
</div>

EditableInput

Editable text input component with validation for color values. Supports different input formats and provides real-time validation.

/**
 * Editable text input with color validation
 * @param props - EditableInput component configuration
 */
const EditableInput: React.ComponentType<EditableInputProps>;

interface EditableInputProps {
  /** Current input value */
  value: string | number;
  /** Label for the input */
  label?: string;
  /** Change callback */
  onChange: (value: string | number, event: Event) => void;
  /** Custom styles */
  style?: { input?: object; label?: object; wrap?: object };
  /** Placeholder text */
  placeholder?: string;
  /** Arrow offset for positioning */
  arrowOffset?: number;
  /** Drag label for draggable inputs */
  dragLabel?: boolean;
  /** Maximum drag value */
  dragMax?: number;
}

Usage Example:

import { EditableInput } from 'react-color';

<EditableInput
  value="#ff0000"
  label="Hex"
  onChange={(value) => handleHexChange(value)}
  style={{ input: { width: 80 } }}
/>

Swatch

Individual color swatch component that displays a clickable color sample.

/**
 * Individual color swatch component
 * @param props - Swatch component configuration
 */
const Swatch: React.ComponentType<SwatchProps>;

interface SwatchProps {
  /** Color value to display */
  color: string;
  /** Custom styles */
  style?: object;
  /** Click callback */
  onClick?: (color: string, event: Event) => void;
  /** Hover callback */
  onHover?: (color: string, event: Event) => void;
  /** Swatch title/tooltip */
  title?: string;
  /** Child elements */
  children?: React.ReactNode;
  /** Focus state */
  focus?: boolean;
  /** Focus styles */
  focusStyle?: object;
}

Usage Example:

import { Swatch } from 'react-color';

<Swatch
  color="#ff0000"
  onClick={(color) => handleColorSelect(color)}
  onHover={(color) => handleColorHover(color)}
  title="Red"
  style={{ width: 20, height: 20 }}
/>

Raised

Container component that provides elevation styling with shadow effects for a "raised" appearance.

/**
 * Container with raised/elevated appearance
 * @param props - Raised component configuration
 */
const Raised: React.ComponentType<RaisedProps>;

interface RaisedProps {
  /** Custom styles */
  style?: object;
  /** ReactCSS styles object */
  styles?: object;
  /** Shadow depth level (0-5) */
  zDepth?: 0 | 1 | 2 | 3 | 4 | 5;
  /** Border radius */
  radius?: number;
  /** Background color */
  background?: string;
  /** Child elements */
  children?: React.ReactNode;
}

Default Props:

background: '#fff'
zDepth: 1
radius: 2

Usage Example:

import { Raised } from 'react-color';

<Raised zDepth={2} radius={4} background="#fff">
  <div>Content with elevated appearance</div>
</Raised>

Creating Custom Pickers

Building block components can be combined with the CustomPicker HOC to create entirely custom color picker interfaces:

import React from 'react';
import { CustomPicker, Saturation, Hue, Alpha, EditableInput } from 'react-color';

const MyPicker = ({ hex, hsl, hsv, rgb, onChange }) => (
  <div style={{ width: 300 }}>
    {/* Saturation/lightness area */}
    <div style={{ height: 200, position: 'relative' }}>
      <Saturation hsl={hsl} hsv={hsv} onChange={onChange} />
    </div>
    
    {/* Hue slider */}
    <div style={{ height: 20, marginTop: 10 }}>
      <Hue hsl={hsl} onChange={onChange} />
    </div>
    
    {/* Alpha slider */}
    <div style={{ height: 20, marginTop: 10 }}>
      <Alpha rgb={rgb} hsl={hsl} onChange={onChange} />
    </div>
    
    {/* Color inputs */}
    <div style={{ display: 'flex', marginTop: 10 }}>
      <EditableInput
        style={{ input: { width: 60 } }}
        label="hex"
        value={hex}
        onChange={onChange}
      />
      <EditableInput
        style={{ input: { width: 40 } }}
        label="r"
        value={rgb.r}
        onChange={onChange}
      />
      <EditableInput
        style={{ input: { width: 40 } }}
        label="g"
        value={rgb.g}
        onChange={onChange}
      />
      <EditableInput
        style={{ input: { width: 40 } }}
        label="b"
        value={rgb.b}
        onChange={onChange}
      />
    </div>
  </div>
);

export default CustomPicker(MyPicker);

Component Props

All building block components receive color data and change handlers as props. The CustomPicker HOC automatically provides normalized color data to wrapped components:

interface WrappedComponentProps {
  /** Hex color string */
  hex: string;
  /** RGB color object */
  rgb: { r: number; g: number; b: number; a: number };
  /** HSL color object */
  hsl: { h: number; s: number; l: number; a: number };
  /** HSV color object */
  hsv: { h: number; s: number; v: number; a: number };
  /** Previous hue value */
  oldHue: number;
  /** Color change source */
  source: string;
  /** Change callback */
  onChange: (color: ColorState) => void;
  /** Swatch hover callback (if onSwatchHover provided) */
  onSwatchHover?: (color: ColorState) => void;
}

Install with Tessl CLI