useRow

A hook to declare a timeline row.

Use this hook to declare an HTML element as a row in the timeline.

This hook is based on dnd-kit's useDroppable hook.

Please make sure you fully understand it's concepts before trying to use it here.

Options

id

id: string

A unique id for this row. This id will later be used to bind items to rows.

disabled?

disabled?: boolean

data?

data?: object

Custom data that can be passed to the row.

🧠 This can be passed to rows to identify their type. This type can later be used in the event callbacks to apply different behaviors to different row types.

Row.tsx

Timeline.tsx

API

All of dnd-kit useDroppable api are returned as well.

rowWrapperStyle

rowWrapperStyle: CSSProperties

Basic styles that must be applied to the row container element.

rowStyle

rowStyle: CSSProperties

Basic styles that must be applied to the row element.

rowSidebarStyle

rowSidebarStyle: CSSProperties

Basic styles that must be applied to the row sidebar element.

setSidebarRef

setSidebarRef: React.RefObject<HTMLDivElement>

A ref that must be passed to the sidebar element.