📢 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.

Comments

[Ben Halpern]

Congrats!

[Steven Mercatante]

Thanks Ben!

[Dennis Vash]

Good stuff, gonna add it to my personal site

[Steven Mercatante]

Awesome! Mind sharing a link once it’s live on your site?

[Dennis Vash]

Sure, Ill post @ issues, cheers

[Paweł Świątkowski]

Nice work, Steven!

[Steven Mercatante]

Thanks Paweł!

[Paweł Świątkowski]

By the way, I think you have some leftover (wrong logo) in the docs ;)

[Steven Mercatante]

Ha, you're right - I need a custom logo for this.

[Nick Taylor]

This looks really nice Steven! 👏🏻 Gonna dig into the source when I have some time.

[Steven Mercatante]

Thanks Nick!

[El Housseine Jaafari]

Wonderful :)

[Steven Mercatante]

Thanks!

[Doaa Mahely]

Hello Steven!
Your component is pretty great, I'm glad whenever I search for something and end up back on DEV 😄
I will keep it in mind for when I start developing my personal website 👍