Modals aren’t anything new, but gone are the days that we need to install bloated libraries to one to our app. Instead, let’s see how we can drop in a new modal to a React app using the HTML Dialog element. What is modal or dialog? Modals and dialogs are similar UI patterns, but with...
Calendars run the world (at least mine), but constantly creating new events for the things you care about can be a pain, which is also true for your visitors adding your events to their calendar. So let’s fix that with an Add to Calendar button with dynamically generated calendar links. How can we dynamically generate...
Nearly all websites have some form of navigation and a common pattern is styling the active link, or the link that represents the current page. This is typically simple with easy access to the current path, but how does that work with the Next.js App Router? Tip: We step through a bit of context before...
Social sharing buttons are great for sharing a link, but it misses the interesting part that people want to share, the content! We can use the Selection API to read text selected on a page allowing our visitors to easily share any text from a page. Getting Text Selections in React with the Selection API...
Detecting clicks is a fundamental way to engage with your visitors on interaction. While it’s easy to detect clicking on something, what about clicking outside of it? Adding Event Handlers in React Often when working with interactions, you’re looking to detect a click or some kind of event directly related to a specific element. This...
Writing content is hard enough, so you want to build a writing an editing experience that you or your client loves. Let’s see how we can easily add a beautiful WYSIWYG editor to a React app in minutes, complete with an AI assistant, with Novel. What is a WYSIWYG editor? A WYSIWYG editor, or What...
Code blocks and text inputs are great ways to show and interact with data, but they often fall short for giving visitors an easy way to copy what’s inside. Using the Clipboard API, we can easily set up a copy action to give our visitors a better user experience. Copying to Clipboard using the Clipboard...
Scrolling to an element or location on a page can help improve a user’s experience by directing them immediately to their area of interest, whether that’s deep in the page or simply back to the top of a page. To help with this, we can use native browser APIs right inside of React that allow...
Data runs the world, but to effectively use that data, you need a way to visualize it. How can we easily spin up beautiful data dashboards in React with Tremor? What is Tremor? Tremor is a component library built on top of popular CSS framework Tailwind that gives a set of building blocks that help...