# 自定义模式

> 为 React 颜色选择器添加自己的标签页。自定义模式就是普通数据：注册后列入 modes，再通过 modeProps 传入 props。

Source: https://chroma-panel.jscrate.dev/zh/react/modes/custom
Last updated: 2026-09-21

自定义模式会在内置模式旁边添加一个标签页。一个模式包含 `id`、`label`、`icon` 和 `Panel` 组件。注册一次，再把它的 id 列入 `modes` 即可；也可以直接传入模式对象。无法识别的 id 会被跳过，并在开发环境下输出警告。

## 注册

```tsx
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` 里，用 [`usePanel()`](https://chroma-panel.jscrate.dev/zh/react/utils/use-color-store) 读取和更新颜色，并直接使用面板自带的控件，如 [ColorArea](https://chroma-panel.jscrate.dev/zh/react/components/color-area)、[Swatch](https://chroma-panel.jscrate.dev/zh/react/components/swatch) 等。

## 向模式传入 props

`modeProps` 以模式 id 为键，每个值会传给对应模式的面板组件：

```tsx
<ChromaPanel modeProps={{ brand: { team: "design" } }} />
```

## API 参考

```ts
function registerMode(mode: PickerMode): void
```

Adds a mode so it can be named in the `modes` prop. A mode is plain data, so registering one changes no existing file.

```ts
function getMode(id: string): PickerMode | undefined
```

Looks up a registered mode by id.

```ts
function resolveModes(requested: readonly (string | PickerMode)[]): PickerMode[]
```

Turns the `modes` prop — a mix of ids and mode objects — into the modes to render, in order.