react-color

By default, the Slider uses the lightness prop to determine the value levels of the color blocks. However, you can use customColorShades to provide specialized lightness arrays for specific colors (e.g., different scales for black vs. white).

When the current color matches a color defined in customColorShades (based on HSVA values within a tolerance), the component switches to that specific lightness array.

Note: Matching is performed using HSVA values with a tolerance of 2 units.

<Slider
  color="#000000"
  customColorShades={[
    {
      color: '#000000',
      lightness: [50, 40, 30, 20, 10]
    },
    {
      color: '#ffffff',
      lightness: [95, 90, 80, 70, 60]
    }
  ]}
  lightness={[80, 65, 50, 35, 20]} // Fallback lightness
/>

The Chrome component features an internal state that allows users to cycle through different color input formats by clicking the Arrow icon next to the editable input. The cycle follows this order:

1. RGBA $\rightarrow$
2. HSLA $\rightarrow$
3. HEXA $\rightarrow$
4. (Back to RGBA)

This behavior is controlled by the inputType prop for the initial state and the ChromeInputType enum.

The HueProps interface defines the configuration for the Hue component. It extends AlphaProps but omits hsva and onChange to provide a specialized interface focused on the hue value.

export interface HueProps extends Omit<AlphaProps, 'hsva' | 'onChange'> {
  onChange?: (newHue: { h: number }) => void;
  hue?: number;
}

If you want to use a custom UI component instead of the default HTML <input>, use the renderInput prop. This prop receives the computed inputProps (which include the internal value, onChange, onBlur, and id) and a ref to the input element.

<EditableInput
  renderInput={(props, ref) => (
    <input
      {...props}
      ref={ref}
      className="my-custom-input-class"
    />
  )}
/>

The Compact component provides a condensed color picker interface including a color swatch, a hex input, and RGBA sliders. It is useful for space-constrained UI elements.

Key Features

• Color Swatch: A grid of colors for quick selection.
• Hex Input: An editable text field to input hex codes directly.
• RGBA Sliders: Controls for Hue, Saturation, Value, and Alpha.
• Customization: Supports custom color palettes, addons, and custom rendering for the selected color indicator.

import Compact from '@uiw/react-color-compact';

function App() {
  return (
    <Compact
      color="#ff0000"
      onChange={(color) => console.log(color)}
    />
  );
}

The @uiw/react-color package acts as a central aggregator for various color picker components and utilities. Instead of importing from individual sub-packages, you can import all available color pickers and color conversion utilities from this single entrypoint.

Available components include:

• Pickers: Alpha, Block, Chrome, Circle, Colorful, Compact, EditableInput, EditableInputRGBA, EditableInputHSLA, Github, Hue, Material, Saturation, ShadeSlider, Sketch, Slider, Swatch, and Wheel.
• Utilities: All exports from @uiw/color-convert are available through this package.

import { Chrome, Compact, Wheel } from '@uiw/react-color';

function MyComponent() {
  return (
    <>
      <Chrome />
      <Compact />
      <Wheel />
    </>
  );
}

The rectRender prop allows you to override the default rendering of the color selection rectangle. It receives SwatchRectRenderProps and can be used to inject custom logic or UI (like an arrow element).

If you provide a rectRender function, it will be used instead of the default Point component.

export interface GithubRectRenderProps extends SwatchRectRenderProps {
  arrow?: JSX.Element;
}

Use hexToRgba to convert a hex string (e.g., #fff, #ffffff, or #ffffffff) into an RgbaColor object. It handles both 3-digit and 6-digit hex formats.

import { hexToRgba } from '@uiw/color-convert';

const rgba = hexToRgba('#ff0000'); // { r: 255, g: 0, b: 0, a: 1 }

Use the getIsEyeDropperSupported function to determine if the browser supports the native EyeDropper API. This is useful for conditionally rendering the EyeDropper component or providing fallback UI.

import { getIsEyeDropperSupported } from '@uiw/react-color-chrome';

if (getIsEyeDropperSupported()) {
  // Render EyeDropper component
}