React Timeline
Goal
React Timeline lets users easily add responsive and customizable timelines to any React project. Originally conceived as a way for developers and designers to showcase their work and achievements (e.g. articles published, videos of conference talks, etc.), the library is also useful for any type of timeline where you want to display chronological events.
The API provides high level Event components that lets users quickly build timelines, as well as low level components used to compose higher level events.
Timelines are fully themable — every visual element, from the event wrapper, date, timeline, marker, and event contents can be customized via a theme object. Each component also exposes semantic CSS class names, making styling via traditional stylesheets possible. The goal here was to give the user as much control over the visual style as possible.
React Timeline supports various layouts. By default, events alternate around the timeline (assuming the viewport is wide enough), but you can also provide a layout prop that changes how events are arranged.
Technologies
React Timeline uses Styled Components to define its visual elements as well as provide the ability to apply custom themes.
The documentation is built with Storybook, which is a fantastic tool that lets you embed actual components alongside written documentation.
Flexbox and a few media queries are responsible for providing the responsive layouts.
Live Demo
Select Layout
Note: layout will always be "Inline Events, Inline Date" if the viewport is too narrow, regardless of your choice.
Select Theme
