Skip to main content

DnD Item

Overview​

The DnD Item Data model defines the types used to represent items inside the builder tree. It is conceptually similar to Drag Source, but instead of external draggable items, it represents structured items that can exist inside a tree and may have children.

DndItemData<TType>​

export type DndItemData<TType> = {
  type: TType;
  imageUrl?: string;
};

Represents the base definition of a drag-and-drop item:

  • type: Identifier used to classify the item type.

  • imageUrl?: Optional image path used to visually represent the item in previews. You can extend this base type to include custom fields for your own item metadata.

Extending DndItemData<TType>

You can add your own fields for richer item metadata:

// Extend base DnD item data with extra fields
export type ExtendedDndItem = DndItemData<'chart'> & {
  title: string;
  color?: string;
};

DndItem<T>​

export type DndItem<T extends DndTreeItem> = T & { [dndItemKey]: true };

Marks an item as a valid drag-and-drop item. The dndItemKey (__dndItem__) is added internally via getDndItem and checked by isDndItem.

DndTreeItem<F, Child>​

export type DndTreeItem<
  F extends DndItemData<any> = DndItemData<any>,
  Child extends DndItemData<any> = DndItemData<any>> = F & TreeItem<DndTreeItem<Child>>;

A typed tree node that combines item data with a TreeItem. This allows DnD items to form hierarchical structures inside the builder tree.

Helper Functions​

getDndItem​

export function getDndItem<T extends DndTreeItem>(item: T): DndItem<T> & Record<string, unknown>;

Marks a given item as a DnD item by attaching a hidden marker property (__dndItem__).

Example​

const rawItem = { type: 'widget', imageUrl: 'url path' };
const dndItem = getDndItem(rawItem);

// dndItem is now typed as DndItem<{ type: 'widget'; imageUrl: string }>

isDndItem​

export function isDndItem(data: unknown): data is DndTreeItem;

Runtime type guard to check if an object is a valid DnD item.

Example​

if (isDndItem(someItem)) {
  console.log(someItem.type); // safely typed
}

See Also​