#196 How to create a Timeline Component with React
sponsor
Try the new way to build custom apps for your unique workflow
Some tools have an opinion about how you should do your job. We're pretty sure you're the expert. With Airtable, you can coordinate and customize every aspect of your internal apps in minutes, not days. Flexible bug tracking, on-duty schedules, team standups, and so much more.
this week's favorite
How to create a Timeline Component with React
These days I've been working on a new page for my website. I wanted to have a Timeline to showcase some of my professional accomplishments over the years.
I wanted to make something that would add some flair to my website, and after seeing another developer implement something similar on their website I figured I'd give it a shot. My first attempt was much simpler, just drawing a line from the last point to the new point then fading out the whole canvas. Check out version 1 here.
Dynamically Update Positions During Drag Using react-beautiful-dnd
react-beautiful-dnd is a drag-and-drop library for use with ReactJS. It is super powerful and gives you a ton of usability right out of the box. You can read more about it here. This article is going to run on the assumption that you have a base understanding of the library and you’d like to be able to add some nice cosmetic features. In this case, it’s having the positions of items dynamically display during the drag action, as shown below! Let’s get to it!
Deep dive: How do React hooks really work?
Hooks are a fundamentally simpler way to encapsulate stateful behavior and side effects in user interfaces. They were first introduced in React and have been broadly embraced by other frameworks like Vue, Svelte, and even adapted for general functional JS. However, their functional design requires a good understanding of closures in JavaScript.
A tiny routing solution for modern React apps that relies on Hooks. A router you wanted so bad in your pet project.
projects
Check out this newsletter if you are writing TypeScript in your JSX. Similar format and put together every week by Marius Schulz.
newsletters
Would you like to become a sponsor and advertise in one of the issues? Check out our media kit and get in touch.