Item

An item is an object that is placed inside of a row, and it's position and size is relative to its values.

Item is an extension of dnd-kits's Draggable.

Please make sure you unserstand it's basic concepts before moving on.

dnd-timeline does not provide you with a <Item /> component, so you will need to build your own.

A basic Item component will look like this:

Item.tsx

interface ItemProps {
  id: string
  relevance: Relevance
  children: ReactNode
}

function Item(props: ItemProps) {
  const {
    setNodeRef,
    attributes,
    listeners,
    itemStyle,
    itemContentStyle,
  } = useItem({
    id: props.id,
    relevance: props.relevance,
  })

  return (
    <div
      ref={setNodeRef}
      style={itemStyle}
      {...listeners}
      {...attributes}
    >
      <div style={itemContentStyle}>
        {props.children}
      </div>
    </div>
  )
}

You can fully customize this component according to your needs.

Usage

Every <Item /> component should be rendered as a child of it's parent row.

Timeline.tsx

<Row id={row.id}>
  {groupedItems[row.id].map((item) => 
    <Item id={item.id} relevance={item.relevance}>
      // item content...
    </Item>
  )}
</Row>