January 2025: Universal React & Custom Time Slider Components
Exploring cross-platform development, crafting bespoke React components, and gearing up for an AI-driven future.
Hey folks,
Here’s hoping your new year has started off well.
After the flurry of activity that always surrounds the end of the year between holidays, travel, and EOY deliverables at work, January feels slightly less manic, even though everyone’s gearing up and setting their new goals for 2025.
At work (like most all companies in tech), we’re exploring how we can incorporate AI into our core products to bring more values to our customers. The learning curve is steep, the technology is evolving faster than anyone can keep up with, and the results are interesting, so far. I have nothing concrete to announce yet, but stay tuned.
In the meantime, I do have some solid React and web development related content to share with you to tide you over.
Mo Khazali, head of mobile and tech lead at Theodo UK, joined me on the LogRocket podcast to talk about the concept of “Universal React.”
Universal React is a relatively new paradigm shift gaining ground as a method for even small tech teams to do cross-platform development using React.
We discuss the key differences between React Native and React, new approaches to code sharing between React stacks, and the performance challenges to keep in mind across different platforms.
It’s a great listen for anyone looking to build apps that feel like native experiences wherever they’re running.
In a similar vein, I published a new blog post about how to build a custom time slider component in Next.js with the help of the Ant Design component library.
Last fall, I was working on a proof of concept (POC) web application that allowed users to visualize data from devices in the real world taking air quality readings over time.
As part of this dashboard, my product owner wanted a time slider that would display all the data for those devices over a range of time, with the ability to “zoom in” on a smaller window of time or drag the slider along the range to see values change over time.
Since I couldn’t find any suitable prebuilt React components or npm packages to fulfill these needs, I ended up building my own custom React component using the Ant Design <Slider /> component and the Day.js date formatting library.
It was a good challenge, but in the end the component was flexible enough to handle very large and very small time spans, style future dates and tick marks differently than past dates, and allow users to resize the selected range slider and drag as much as they want. I hope you might find it useful too.
Here’s a video of the finished product, and my full article also includes a link to a working code demo in CodeSandbox.
I hope you enjoyed this month’s edition of “Paige Codes.” Please share with your friends if you did.
See you again at the end of February,
- Paige
Not subscribed yet? No worries.
I send a free email every month or so. You can check out my archive, or sign up below: