📢 Announcing React Timeline

This post was originally published at stevemerc.com

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 and demo here, and the source code here.

You can check out the CodeSandbox demo below, but I suggest opening it in a new tab to see how the responsive layouts behave.

👋 Enjoyed this post?

Join my newsletter and follow me on Twitter @mercatante for more content like this.