Description
For timelines with many events, users need a way to quickly locate specific events by searching text content rather than manually scrolling through decades.
Use Case
A user viewing NFL history wants to find all events related to "Packers" or "Super Bowl" without manually panning through 100+ years of history.
Proposed Solution
- Add
showSearch prop to render a search input
- Search should match against
title, description, and optionally custom fields
- Matching events should be highlighted and the timeline should auto-pan to the first result
- Provide prev/next navigation for multiple matches
- Support
onSearch callback for custom search implementations
Example API
<Timeline
data={data}
showSearch={true}
searchFields={['title', 'description']}
onSearch={(query, results) => console.log(`Found ${results.length} events`)}
/>
Issue generated from user feedback while building an NFL history timeline
Description
For timelines with many events, users need a way to quickly locate specific events by searching text content rather than manually scrolling through decades.
Use Case
A user viewing NFL history wants to find all events related to "Packers" or "Super Bowl" without manually panning through 100+ years of history.
Proposed Solution
showSearchprop to render a search inputtitle,description, and optionally custom fieldsonSearchcallback for custom search implementationsExample API
Issue generated from user feedback while building an NFL history timeline