Timeline

<Timeline> renders a vertical track of <TimelinePoint> markers that stay in proportion to the range you supply. Each point can show a title, summary, extended description, highlight state, and related IIIF resources.

Ranges accept year-, month-, or day-level precision (1701, July 1776, or 1776-07-04). When you provide a range the points are spaced mathematically, so clusters of events appear closer together in the scroll container. Control the viewport with the height prop—pass a pixel value, rem value, or percentage, and the component honors it.

Example: Empire arc

Below is a scrolling demo that covers 1750–1900. range keeps each point proportional, threshold={5} collapses events within five years of one another, and steps={50} draws guide ticks every fifty years.

Empire and Control in Colonial India

Famine, mapping, policy, and revolt across one and a half centuries.

1750 – 1900

1770Great Bengal FamineStarvation ravaged Company-controlled Bengal.

1781Bengal Atlas publishedJames Rennell mapped Eastern India for Company campaigns.

A Bengal atlas: containing maps of the theatre of war and commerce on that side of Hindoostan. Compiled from the original surveys; and published by the order of the honourable the Court of directors for the affairs of the East India company

1857Great MutinyIndian regiments rebelled across the north.

Repulse of a sortieAt head of title: No. 9

1885Indian National Congress foundedA national movement for reform gained structure.

<Timeline  title="Empire and Control in Colonial India"  description="Famine, mapping, policy, and revolt across one and a half centuries."  range={{start: '1750', end: '1900', granularity: 'year'}}  threshold={5}  steps={50}  height="600px">  <TimelinePoint date="1770" title="Great Bengal Famine" summary="Starvation ravaged Company-controlled Bengal." />  <TimelinePoint    date="1781"    title="Bengal Atlas published"    summary="James Rennell mapped Eastern India for Company campaigns."    referencedManifests={[      'https://api.dc.library.northwestern.edu/api/v2/works/7a5dd871-d0bc-4d6f-8469-1c23a872fc29?as=iiif',    ]}  />  <TimelinePoint    date="1857"    title="Great Mutiny"    summary="Indian regiments rebelled across the north."    highlight    referencedManifests={[      'https://api.dc.library.northwestern.edu/api/v2/works/c5a11577-a1f2-4288-95de-96ad616174ed?as=iiif',    ]}  />  <TimelinePoint date="1885" title="Indian National Congress founded" summary="A national movement for reform gained structure." /></Timeline>

Props

Timeline

Prop	Type	Required	Notes
`title`	string		Optional heading rendered above the track.
`description`	string		Short blurb shown under the heading.
`range`	object		`{start, end, granularity}` controls proportional spacing. Granularity accepts `year`, `month`, or `day`.
`threshold`	number		Collapse points that fall within this many units of the selected granularity.
`steps`	number		Draw evenly spaced tick marks along the spine.
`height`	string or number		Scrolling viewport height. Numbers are treated as pixels.
`locale`	string		Locale tag used for formatted dates.
`children`	nodes	✅	One or more `<TimelinePoint>` elements.

TimelinePoint

Prop	Type	Required	Notes
`date` / `value`	string	✅	Accepts ISO dates (`1776-07-04`), months (`July 1776`), or bare years.
`title`	string	✅	Label shown beside the point.
`summary`	string		Short sentence under the title.
`description`	string		Long-form copy shown inside the detail panel.
`side`	`'left'` · `'right'`		Pin the marker to a side; otherwise it alternates.
`highlight`	boolean		Draw the point with the accent color.
`referencedManifests`	array		List of manifest IDs to resolve into teaser cards.
`iiifResources`	array		Provide `{href, label}` entries for non-manifest resources.
`children`	nodes		Additional markup rendered in the detail drawer.

Examples

Range spacing

Give the component a range so events sit in proportion to each other. Combine threshold and steps to cluster near-duplicate years and draw guide ticks.

Empire and Control in Colonial India

Moments of famine, conflict, and policy between 1750 and 1900.

1750 – 1900

1770Great Bengal FamineStarvation ravaged Company territory.

1781Bengal AtlasRennell mapped Bengal for Company campaigns.

1857Great MutinyIndian regiments rebelled across the north.

<Timeline  title="Empire and Control in Colonial India"  description="Moments of famine, conflict, and policy between 1750 and 1900."  range={{start: '1750', end: '1900', granularity: 'year'}}  threshold={5}  steps={50}  height="600px">  <TimelinePoint date="1770" title="Great Bengal Famine" summary="Starvation ravaged Company territory." />  <TimelinePoint date="1781" title="Bengal Atlas" summary="Rennell mapped Bengal for Company campaigns." />  <TimelinePoint date="1857" title="Great Mutiny" summary="Indian regiments rebelled across the north." highlight /></Timeline>

Referenced manifests

Provide referencedManifests so each point pulls teaser data from the page’s cited works.

---referencedManifests:  - https://api.dc.library.northwestern.edu/api/v2/works/7a5dd871-d0bc-4d6f-8469-1c23a872fc29?as=iiif---

1781

1781Bengal Atlas publishedMaps of Eastern India shaped British campaigns.

<Timeline>  <TimelinePoint    date="1781"    title="Bengal Atlas published"    summary="Maps of Eastern India shaped British campaigns."    referencedManifests={[      'https://api.dc.library.northwestern.edu/api/v2/works/7a5dd871-d0bc-4d6f-8469-1c23a872fc29?as=iiif',    ]}  /></Timeline>

Rich details

Use children to add inline prose and cite additional IIIF resources beyond the main manifest list.

1857

1857Great Mutiny spreadsGarrison towns erupt across North India.

Repulse of a sortieAt head of title: No. 9

Great Mutiny, India

<Timeline>  <TimelinePoint    date="1857-05-10"    title="Great Mutiny spreads"    summary="Garrison towns erupt across North India."    referencedManifests={[      'https://api.dc.library.northwestern.edu/api/v2/works/c5a11577-a1f2-4288-95de-96ad616174ed?as=iiif',    ]}    iiifResources={[      {        href: 'https://api.dc.library.northwestern.edu/api/v2/works/c5a11577-a1f2-4288-95de-96ad616174ed?as=iiif',        label: 'Great Mutiny, India',      },    ]}  >    <p>The rebellion surged across Delhi, Kanpur, and Lucknow in the first month.</p>  </TimelinePoint></Timeline>

Pinned sides

Pass side="left" or side="right" when a point should stay on one side of the spine instead of alternating.

1781 – 1790

1781Bengal Atlas

1785Survey depots expand

1790Company reforms

<Timeline>  <TimelinePoint date="1781" title="Bengal Atlas" side="left" />  <TimelinePoint date="1785" title="Survey depots expand" side="left" />  <TimelinePoint date="1790" title="Company reforms" side="right" /></Timeline>

Clustered groups

Use threshold to group events that fall within a set number of years for the current granularity.

1800 – 1850

1803 – 18143 events

<Timeline threshold={10} range={{start: '1800', end: '1850', granularity: 'year'}}>  <TimelinePoint date="1803" title="Capture of Delhi" summary="Company forces seize Delhi." />  <TimelinePoint date="1806" title="Vellore uprising" summary="Sepoys revolt in Vellore." />  <TimelinePoint date="1814" title="Gurkha War" summary="Gurkha forces confront the Company." /></Timeline>