useTimeline

Usage#

import { useTimeline } from '@primereact/headless/timeline';
 
const { rootProps } = useTimeline();
 
return <div {...rootProps}></div>;

useTimeline provides data attributes for alignment and orientation — see Primitive for a component-based API.

Features#

• Returns spread-ready rootProps with data-align and data-orientation attributes
• Supports five alignment modes: left, right, alternate, top, bottom
• Supports vertical and horizontal orientation

Behavior#

Alignment#

Set align to control content placement relative to the timeline line.

const { rootProps } = useTimeline({ align: 'alternate' });
 
rootProps['data-align']; // 'alternate'

Available values: 'left' (default), 'right', 'alternate', 'top', 'bottom'.

Orientation#

Set orientation to switch between vertical and horizontal layouts.

const { rootProps } = useTimeline({ orientation: 'horizontal' });
 
rootProps['data-orientation']; // 'horizontal'

Custom Styling with Data Attributes#

Use the data attributes to build CSS-driven layout variations.

[data-scope='timeline'][data-orientation='horizontal'] {
    flex-direction: row;
}
 
[data-scope='timeline'][data-align='alternate'] .event:nth-child(even) {
    flex-direction: row-reverse;
}

API#

useTimeline#

Accessibility#

See Timeline Primitive for WAI-ARIA compliance details and keyboard support.