React TypeScript 颜色选择器类型

chroma-panel 同时为 ESM 和 CommonJS 提供了类型声明。组件 props、颜色对象和变更结果的类型都从同一个包中导入。

常用类型

import type {
  ColorChangeResult,
  ColorFormat,
  Hsva,
  Rgba,
  ColorPalette,
  ModeId,
  PickerMode,
} from "chroma-panel";

ModeId 是五个内置模式 id 的联合类型。PickerMode 是 registerMode 接收的参数结构，详见自定义模式。

ColorChangeResult

所有变更处理函数收到的都是它。无论你把 format 设成什么，每个字段都始终存在，所以 hex 和 rgba 随时都能读取。

type ColorChangeResult = {
  hex: string;
  hexa: string;
  rgb: Rgb;
  rgba: Rgba;
  hsl: Hsl;
  hsla: Hsla;
  hsva: Hsva;
  css: string;
};

css 是按你所选 format 生成的字符串，也是表单提交的值。所有格式见序列化。

为处理函数标注类型

import { ColorInput, type ColorChangeResult } from "chroma-panel";
 
function handleChange(result: ColorChangeResult): void {
  console.log(result.hex, result.hsva);
}
 
<ColorInput onChange={handleChange} />;

Prop 类型

两个组件的 props 接口都已导出，你可以在此基础上扩展：

import type { ChromaPanelProps, ColorInputProps } from "chroma-panel";
 
type BrandPickerProps = ColorInputProps & { label: string };

ColorInputProps 继承自 ChromaPanelProps，所以面板接受的 prop，输入框也都接受。两者的每个 prop 都在 ColorInput 和 ChromaPanel 中有详细说明。