构建自定义 React 颜色选择器

如果你的界面应当放在 ChromaPanel 里面，就添加一个自定义模式。如果要在面板之外做一套不同的布局，就使用颜色 store 和 hook。

在面板内：自定义模式

模式只是普通数据，所以新增一个模式不需要改动任何现有文件：

import { registerMode, ChromaPanel } from "chroma-panel";
 
registerMode({
  id: "brand",
  label: "Brand colors",
  icon: BrandIcon,
  Panel: BrandPanel, // reads the color with usePanel()
});
 
<ChromaPanel modes={["wheel", "brand"]} />;

在 BrandPanel 中，你可以使用面板自带的控件，比如 ColorArea、ChannelSlider、Swatch 等。它们通过 usePanel() 读取颜色，所以只能在 ChromaPanel 内部使用。

更多内容见自定义模式。

在面板外：store 和 hook

如果选择器不在 ChromaPanel 里，就创建一个 store，再用 hook 读取它。createColorStore 来自颜色引擎入口，这个入口不依赖 React。

import { createColorStore } from "chroma-panel/core";
import { useColorValue } from "chroma-panel";
 
const store = createColorStore({ h: 220, s: 75, v: 80, a: 1 });
 
function Preview() {
  const color = useColorValue(store);
 
  return <div style={{ background: `hsl(${color.h} 50% 50%)` }} />;
}

这些基础组件不能单独使用

ColorArea、ChannelSlider 等组件都通过 usePanel() 读取颜色，在 ChromaPanel 之外渲染它们是无法工作的。请改用 createColorStore 和 hook。

把同一个 store 传给多个组件，它们就会保持同步。这种做法可以替代在每个组件上分别控制颜色值。

const store = createColorStore({ h: 220, s: 75, v: 80, a: 1 });
 
<ChromaPanel store={store} />
<ColorInput store={store} />

详见 useColorStore。

组合

在面板内：自定义模式

在面板外：store 和 hook

在多个面板间共享一个颜色