open-index/open-npm huggingface dataset:
npm package: @maolipeng/custom-picker
Description: Lightweight grid picker React component with custom render support.
Author: Maolipeng
Latest version: 0.0.1

# custom-picker

A lightweight, tailwind-friendly grid picker React component. Supports custom renderers, a "none" option, and easy sizing/spacing controls.

## Install

```bash
pnpm add custom-picker
# or
npm install custom-picker
# or
yarn add custom-picker
```

## Usage

```tsx
import { CustomPicker, type PickerOption } from "custom-picker"

const options: PickerOption<string>[] = [
  { value: "none", label: "T", isNone: true },
  { value: "gold", label: "T", style: { backgroundColor: "#FFD700", color: "#000" } },
  { value: "red", label: "T", style: { backgroundColor: "#E74C3C", color: "#fff" } },
]

export function Example() {
  const [value, setValue] = useState<string | null>(null)

  return (
    <CustomPicker
      options={options}
      value={value}
      onChange={setValue}
      columns={4}
      buttonSize={48}
      gap={8}
      placeholder="T"
      renderOption={(option, selected) => (
        <div
          className={`flex h-full w-full items-center justify-center rounded-lg ${
            selected ? "ring-2 ring-blue-500 ring-offset-2 ring-offset-gray-900" : ""
          }`}
          style={option.style}
        >
          {option.label}
        </div>
      )}
    />
  )
}
```

### Props

- `options`: 列表项，支持 `render` 自定义缩略图；`isNone` 为 true 时会返回 `null`。
- `value` / `defaultValue` / `onChange`: 受控或非受控值，值为 `null` 表示选择了 `isNone` 项。
- `columns`: 每行显示多少列。
- `buttonSize`: 每个按钮尺寸（px）。
- `gap`: 按钮间距（px）。
- `placeholder`: 为空时展示的占位文本。
- `disabled`: 是否禁用。
- `renderOption`, `renderSelected`: 完全自定义选项缩略图与主按钮渲染。

### FormPicker

`FormPicker` 仅仅转发 `value/onChange`，方便在表单控件里使用：

```tsx
<FormPicker options={options} value={value} onChange={setValue} />
```

### Build

```bash
pnpm build
```

Outputs ESM, CJS, and d.ts files to `dist/`.