# Item

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

{% hint style="info" %}
Item is an extension of dnd-kits's [Draggable](https://docs.dndkit.com/api-documentation/draggable).

Please make sure you unserstand it's basic concepts before moving on.
{% endhint %}

`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:

{% code title="Item.tsx" %}

```tsx
interface ItemProps {
  id: string
  span: Span
  children: ReactNode
}

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

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

{% endcode %}

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.

{% code title="Timeline.tsx" %}

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

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://samuel-arbibe.gitbook.io/dnd-timeline/documentation/item.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.