DEV Community

Steven Mercatante
Steven Mercatante

Posted on • Updated on • Originally published at stevenmercatante.com

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

Discussion (14)

Collapse
ben profile image
Ben Halpern

Congrats!

Collapse
mercatante profile image
Steven Mercatante Author

Thanks Ben!

Collapse
denvash profile image
Dennis Vash

Good stuff, gonna add it to my personal site

Collapse
mercatante profile image
Steven Mercatante Author

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

Collapse
denvash profile image
Dennis Vash

Sure, Ill post @ issues, cheers

Collapse
katafrakt profile image
Paweł Świątkowski

Nice work, Steven!

Collapse
mercatante profile image
Steven Mercatante Author

Thanks Paweł!

Collapse
katafrakt profile image
Paweł Świątkowski

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

Collapse
mercatante profile image
Steven Mercatante Author

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

Collapse
nickytonline profile image
Nick Taylor (he/him)

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

Collapse
mercatante profile image
Steven Mercatante Author

Thanks Nick!

Collapse
jefferyhus profile image
El Housseine Jaafari

Wonderful :)

Collapse
mercatante profile image
Steven Mercatante Author

Thanks!

Collapse
dmahely profile image
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 👍