UI & Components

Posts

  • How to Style Active Links in Next.js App Router

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

  • How to Share Selected Text in React with the Selection API

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

  • How to Detect Clicks Anywhere on a Page in React

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

  • How to Add an AI-Powered WYSIWYG Editor in React & Astro with Novel

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

  • How to Copy to Clipboard in React

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

  • How to Scroll to an Element in React

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

  • How to Build Data Dashboards in React with Tremor & Tailwind

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