@xiangge1307/icon-grid-react

@xiangge1307/icon-grid 的 React 18 适配器，提供 <IconGrid /> 组件。

安装

pnpm add @xiangge1307/icon-grid-react @xiangge1307/icon-grid

需同时安装核心包（peer dependency）。

快速上手

import { useState } from 'react'
import { IconGrid } from '@xiangge1307/icon-grid-react'
import type { GridItem } from '@xiangge1307/icon-grid'
import '@xiangge1307/icon-grid/style.css'

export function App() {
  const [items, setItems] = useState<GridItem[]>([
    { id: '1', label: '工作台', icon: '/icons/a.png', type: 'icon' },
    { id: '2', label: '设置', icon: '/icons/b.png', type: 'icon' },
  ])

  return <IconGrid items={items} cols={6} onChange={setItems} />
}

样式：必须 import '@xiangge1307/icon-grid/style.css'，否则布局与交互样式缺失。

Props

与核心 IconGridOptions 一致，常用项：

| Prop | 类型 | 默认 | 说明 | |------|------|------|------| | items | GridItem[] | — | 必填 | | cols | number | 自适应 | 列数 | | editable | boolean | true | 可编辑 | | descriptionField | string \| false | — | 悬停描述字段名 | | onChange | (items) => void | — | 数据变更写回 | | onIconClick | (item, event) => void | — | 点击图标 | | onReady | (api) => void | — | 实例就绪 |

Ref 方法

import { useRef } from 'react'
import { IconGrid, type IconGridRef } from '@xiangge1307/icon-grid-react'

const ref = useRef<IconGridRef>(null)

<IconGrid ref={ref} items={items} onChange={setItems} />
// ref.current?.getItems() / setItems() / setEditable() / getInstance()

相关包

• 核心：@xiangge1307/icon-grid
• Vue：@xiangge1307/icon-grid-vue

License

MIT