custom-picker

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

Install

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

Usage

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，方便在表单控件里使用：

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

Build

pnpm build

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