I'm excited to announce the release of React Timeline, an open source library for creating responsive, customizable, and themable timelines in React apps.
Originally conceived as a way for developers and designers to showcase their work and achievements (e.g. articles published, videos of conference talks, designs created, etc.), the library is also useful for any type of timeline where you want to display chronological events.
Its 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. A few themes are provided out of the box, and creating your own is easy.
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.
Check out the docs here, and the source code here.You can test the various layouts and included themes below in the 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
