ReactJS

Creating Custom Scrollbars with React

Published Jan 14, 2022

Updated Nov 22, 2023

6 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

Styling scrollbars is no simple task. The CSS available to style them is different across browsers, and not very featureful. If you want to make something extremely customized, you can't rely on the native scrollbars—you have to build your own out of DOM elements. This blog post shows you how to do just that using React and TypeScript. If you want to skip straight to the final functional demo, go here.

Structure of a Scrollbar

A scroll bar has two main components: a thumb (this piece you click and drag to scroll) and a track (the space within which the thumb moves). The size of the thumb usually gives a hint to how large the visible content is in relation to the total size of the content. That is to say, the smaller the thumb, the more content there is outside of the current view. Thumb position on the track tells you how much off-screen content there is in each scroll direction. Scrollbars sometimes also have buttons on the ends that you can click to scroll a set amount in a certain direction, though these aren't seen as often as they used to be. We'll be recreating both of these user interface elements with div elements.

Hide Native Scrollbars

Before we create our custom scrollbars, we'll need to hide the native browser scrollbars to prevent interference. This is easily accomplished with a bit of CSS. We're also including overflow: auto, because we want to make sure that out content is still scrollable even if we can't see the native scrollbars.

.custom-scrollbars__content {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.custom-scrollbars__content::-webkit-scrollbar {
  display: none;
}

Custom Scrollbar Functionality

Laying out Scrollbar Elements

The content we want to scroll and the scrollbar itself will go inside a wrapper div. That div will have two children: another div containing the content, and a div containing our scrollbar.

The scrollbar div will contain a button to scroll up, the elements of the thumb and track inside a wrapper div, and another button to scroll down. In the example below, they've been given classes (remember, we're using React, so we're using className) to help identify them.

<div className="custom-scrollbars__container">
  <div className="custom-scrollbars__content">
    {children}
  </div>
  <div className="custom-scrollbars__scrollbar">
    <button className="custom-scrollbars__button">⇑</button>
    <div className="custom-scrollbars__track-and-thumb">
      <div className="custom-scrollbars__track"></div>
      <div className="custom-scrollbars__thumb"></div>
    </div>
    <button className="custom-scrollbars__button">⇓</button>
  </div>
</div>

The track and thumb elements are siblings and will both be positioned absolutely with CSS. The top style of the thumb will be modified with JavaScript. It's better to have these two side-by-side and positioned absolutely, rather than have the thumb as a child of the track, because it prevents any ambiguity about whether you've clicked one or the other. If you click and drag the thumb, but drag so fast that your cursor is over the track when you realease it, it's possible, when nesting them, to accidentally trigger a click event on the track. That would could weird scrolling bugs. Keeping them as siblings prevents that.

.custom-scrollbars__track-and-thumb {
  display: block;
  height: 100%;  /* must have some height */
  position: relative;
  width: 16px; /* must have some width */
}

/* The track is meant to fill the space it's given, so top and bottom are set to 0. */
.custom-scrollbars__track {
  bottom: 0;
  cursor: pointer;
  position: absolute;
  top: 0;
  width: 16px; /* must have some width */
}

/* No top or bottom set for the thumb. That will be controlled by JavaScript. */
.custom-scrollbars__thumb {
  position: absolute;
  width: 16px; /* must have some width */
}

Sizing the Thumb

Your content may change size from initial render, due to data fetch requests completing or for other reasons. The size of the thumb needs to be able to adjust to match whatever the current content's size is.

Because the content resizing won't necessarily result in the window resizing, we'll use a ResizeObserver to what for changes in just the content size.

We store references to the content element, the track, the thumb, and the resize observer with useRef. Our handleResize() function computes the ratio of visible content to total scrollable content (clientHeight / scrollHeight) of the content container, then multiplies it by the track's height to get a height for the thumb. We set a minimum of 20 pixels for the height in case the content is so long that the thumb would otherwise be too small to click. The thumb's height is finally stored in React state.

A useEffect sets an initial height, then creates a ResizeObserver to watch the size of the content, and trigger the handleResize() function again if it occurs.

import React, { useState, useEffect, useRef } from 'react';

const Scrollbar = ({
  children,
  className,
  ...props
}: React.ComponentPropsWithoutRef<'div'>) => {
  const contentRef = useRef<HTMLDivElement>(null);
  const scrollTrackRef = useRef<HTMLDivElement>(null);
  const scrollThumbRef = useRef<HTMLDivElement>(null);
  const observer = useRef<ResizeObserver | null>(null);
  const [thumbHeight, setThumbHeight] = useState(20);

  function handleResize(ref: HTMLDivElement, trackSize: number) {
    const { clientHeight, scrollHeight } = ref;
    setThumbHeight(Math.max((clientHeight / scrollHeight) * trackSize, 20));
  }

  // If the content and the scrollbar track exist, use a ResizeObserver to adjust height of thumb and listen for scroll event to move the thumb
  useEffect(() => {
    if (contentRef.current && scrollTrackRef.current) {
      const ref = contentRef.current;
      const {clientHeight: trackSize} = scrollTrackRef.current;
      observer.current = new ResizeObserver(() => {
        handleResize(ref, trackSize);
      });
      observer.current.observe(ref);
      return () => {
        observer.current?.unobserve(ref);
      };
    }
  }, []);

  return (
    <div className="custom-scrollbars__container">
      <div className="custom-scrollbars__content" ref={contentRef} {...props}>
        {children}
      </div>
      <div className="custom-scrollbars__scrollbar">
        <button className="custom-scrollbars__button">⇑</button>
        <div className="custom-scrollbars__track-and-thumb">
          <div className="custom-scrollbars__track"></div>
          <div
            className="custom-scrollbars__thumb"
            ref={scrollThumbRef}
            style={{
              height: `${thumbHeight}px`,
            }}
          ></div>
        </div>
        <button className="custom-scrollbars__button">⇓</button>
      </div>
    </div>
  );
};

export default Scrollbar;

Handle the Position of the Thumb

When we scroll, the thumb should move in proportion to our scrolling. We'll do this with a useCallback that is called on the scroll event. We take the proportion of how far the content has been scrolled (scrollTop) to the total scrollable area (scrollHeight), and multiply it by the track's height to get the new position of the top edge of the thumb. To make sure the thumb doesn't fly off the end of the track, we cap the top position to no more than the difference between the track's height and the thumb's height.

- import React, { useState, useEffect, useRef } from 'react';
+ import React, { useState, useEffect, useRef, useCallback } from 'react';

const handleThumbPosition = useCallback(() => {
  if (
    !contentRef.current ||
    !scrollTrackRef.current ||
    !scrollThumbRef.current
  ) {
    return;
  }
  const { scrollTop: contentTop, scrollHeight: contentHeight } =
    contentRef.current;
  const { clientHeight: trackHeight } = scrollTrackRef.current;
  let newTop = (+contentTop / +contentHeight) * trackHeight;
  newTop = Math.min(newTop, trackHeight - thumbHeight);
  const thumb = scrollThumbRef.current;
  thumb.style.top = `${newTop}px`;
}, []);

useEffect(() => {
  if (contentRef.current && scrollTrackRef.current) {
    const ref = contentRef.current;
    const {clientHeight: trackSize} = scrollTrackRef.current;
    observer.current = new ResizeObserver(() => {
      handleResize(ref, trackSize);
    });
    observer.current.observe(ref);
+   ref.addEventListener('scroll', handleThumbPosition);
    return () => {
      observer.current.unobserve(ref);
+     ref.removeEventListener('scroll', handleThumbPosition);
    };
  }
}, []);

Handle Clicking the Buttons

Wiring the up and down scroll buttons is very straightforward. We simply create a function that accepts a direction, and scrolls the content by a fixed amount in that direction. Keep in mind that in browsers, the y axis is positive going from top to bottom. That means scrolling down would mean a positive number of pixels, and up would be negative. Then we add this function to the onClick of our buttons.

function handleScrollButton(direction: 'up' | 'down') {
  const { current } = contentRef;
  if (current) {
    const scrollAmount = direction === 'down' ? 200 : -200;
    current.scrollBy({ top: scrollAmount, behavior: 'smooth' });
  }
}

<button
  className="custom-scrollbars__button"
+ onClick={() => handleScrollButton('up')}
>
  ⇑
</button>

...

<button
  className="custom-scrollbars__button"
+ onClick={() => handleScrollButton('down')}
>
  ⇓
</button>

Handle Clicking the Track

In most scrollbars, clicking on the scroll track will jump the thumb ahead in that direction. We'll once again useCallback to handle clicking on the track and updating the content's scroll position. The following snippet and comments walk through the steps of figuring out the new position for the content to scroll to.

const handleTrackClick = useCallback(
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    const { current: trackCurrent } = scrollTrackRef;
    const { current: contentCurrent } = contentRef;
    if (trackCurrent && contentCurrent) {
      // First, figure out where we clicked
      const { clientY } = e;
      // Next, figure out the distance between the top of the track and the top of the viewport
      const target = e.target as HTMLDivElement;
      const rect = target.getBoundingClientRect();
      const trackTop = rect.top;
      // We want the middle of the thumb to jump to where we clicked, so we subtract half the thumb's height to offset the position
      const thumbOffset = -(thumbHeight / 2);
      // Find the ratio of the new position to the total content length using the thumb and track values...
      const clickRatio =
        (clientY - trackTop + thumbOffset) / trackCurrent.clientHeight;
      // ...so that you can compute where the content should scroll to.
      const scrollAmount = Math.floor(
        clickRatio * contentCurrent.scrollHeight
      );
      // And finally, scroll to the new position!
      contentCurrent.scrollTo({
        top: scrollAmount,
        behavior: 'smooth',
      });
    }
  },
  [thumbHeight]
);

<div
  className="custom-scrollbars__track"
  ref={scrollTrackRef}
+ onClick={handleTrackClick}
></div>

Handle Dragging the Thumb

At last, the hardest part: clicking and dragging the thumb to scroll. To do this, we write three functions to handle mousedown, mousemove, and mouseup events. We'll track whether or not we're actively dragging, where the mouse was when we started dragging, and where the scroll position of the content was where we started dragging with React state.

The handleThumbMouseup() function is simplest: it simply sets isDragging to false so we know we're not dragging the thumb anymore.

handleThumbMousedown does a bit more. In addition to setting isDragging to true, it records the mouse's y position, and the content's scrollTop when you click down, and sets them to scrollStartPosition and initialScrollTop respectively. We will use these values to calculate the new scrollTop for the content.

The handleThumbMousemove() function is the trickiest. First, we figure out how far the mouse now is (e.clientY) from where it was when we started (scrollStartPosition). This tells us the absolute number of pixels the thumb should have moved up or down. But we've decoupled the size of the content's container from the size of the scrollbar track, so pixels of thumb scrolling doesn't equal the number of pixels the content should scroll. (E.g., if the total content length is 7 times longer than the height of the track, then dragging the thumb by one pixel should scroll the content by 7 pixels.) To scale the value, we multiply it by the ratio of the content's height to the thumb's height. Finally, set calculate the new scrollTop and set it to the content. The thumb's position will take care of itself thanks to handleThumbPosition() being called by the scroll event listener on the content.

  const contentRef = useRef<HTMLDivElement>(null);
  const scrollTrackRef = useRef<HTMLDivElement>(null);
  const scrollThumbRef = useRef<HTMLDivElement>(null);
  const observer = useRef<ResizeObserver | null>(null);
  const [thumbHeight, setThumbHeight] = useState(20);
+ const [scrollStartPosition, setScrollStartPosition] = useState<number | null>(
    null
  );
+ const [initialScrollTop, setInitialScrollTop] = useState<number>(0);
+ const [isDragging, setIsDragging] = useState(false);

const handleThumbMousedown = useCallback((e) => {
  e.preventDefault();
  e.stopPropagation();
  setScrollStartPosition(e.clientY);
  if (contentRef.current) setInitialScrollTop(contentRef.current.scrollTop);
  setIsDragging(true);
}, []);

const handleThumbMouseup = useCallback(
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (isDragging) {
      setIsDragging(false);
    }
  },
  [isDragging]
);

const handleThumbMousemove = useCallback(
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (isDragging) {
      const {
        scrollHeight: contentScrollHeight,
        offsetHeight: contentOffsetHeight,
      } = contentRef.current;

      // Subtract the current mouse y position from where you started to get the pixel difference in mouse position. Multiply by ratio of visible content height to thumb height to scale up the difference for content scrolling.
      const deltaY =
        (e.clientY - scrollStartPosition) *
        (contentOffsetHeight / thumbHeight);
      const newScrollTop = Math.min(
        initialScrollTop + deltaY,
        contentScrollHeight - contentOffsetHeight
      );

      contentRef.current.scrollTop = newScrollTop;
    }
  },
  [isDragging, scrollStartPosition, thumbHeight]
);

// Listen for mouse events to handle scrolling by dragging the thumb
useEffect(() => {
  document.addEventListener('mousemove', handleThumbMousemove);
  document.addEventListener('mouseup', handleThumbMouseup);
  document.addEventListener('mouseleave', handleThumbMouseup);
  return () => {
    document.removeEventListener('mousemove', handleThumbMousemove);
    document.removeEventListener('mouseup', handleThumbMouseup);
    document.removeEventListener('mouseleave', handleThumbMouseup);
  };
}, [handleThumbMousemove, handleThumbMouseup]);

<div className="custom-scrollbars__track-and-thumb">
  <div
    className="custom-scrollbars__track"
    ref={scrollTrackRef}
    onClick={handleTrackClick}
+   style={{ cursor: isDragging ? 'grabbing' : 'pointer' }}
  ></div>
  <div
    className="custom-scrollbars__thumb"
    ref={scrollThumbRef}
+   onMouseDown={handleThumbMousedown}
    style={{
      height: `${thumbHeight}px`,
+     cursor: isDragging ? 'grabbing' : 'grab',
    }}
  ></div>
</div>

Full Code and Demo

That's it! You've now got a completely custom scrollbar in React and TypeScript using DOM elements instead of native scrollbars. You can customize these scrollbars with any kind of CSS you like!

You can see the full code here and play around with the demo.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Tom VanAntwerp
@tvanantwerp @tvanantwerp

The Journey To Making A New Framework: TanStack Start with Tanner Linsley

Danny Thompson, Director of Technology at This Dot Labs, talks with Tanner Linsley, Creator of TanStack, about his latest project, TanStack Start. They discuss the challenges of existing frameworks like Next.js and Remix, the development of TanStack Router, and the future of React Server Components. Tanner also explains how caching strategies and fine-grained invalidation can transform the user experience. Chapters - - Introduction & Tanner’s Background (00:00) - Going Full-Time on TanStack (01:00) - The Birth of TanStack Router (02:21) - Why Build Another Framework? (04:00) - React Server Components: Potential & Limitations (07:05) - Fine-Grained Cache Invalidation & UX (09:02) - Parallel Data Fetching in Routing (13:39) - TanStack Start: Alpha & Future Plans (16:41) - Where to Learn More About TanStack (18:48) Find Tanner Linsley on Social Media Twitter: https://x.com/tannerlinsley Linkedin: https://www.linkedin.com/in/tannerlinsley/ Github: https://github.com/tannerlinsley TanStack: https://tanstack.com/ Sponsored by Wix Studio...

Oct 9, 2024

1 min

TanStack QueryJavaScriptReact

The HTML Dialog Element: Enhancing Accessibility and Ease of Use

The HTML Dialog Element: Enhancing Accessibility and Ease of Use Dialogs are a common component added to applications, whether on the web or in native applications. Traditionally there has not been a standard way of implementing these on the web, resulting in many ad-hoc implementations that don’t act consistently across different web applications. Often, commonly expected features are missing from dialogs due to the complexity of implementing them. However, web browsers now offer a standard dialog element. Why use the dialog element? The native dialog element streamlines the implementation of dialogs, modals, and other kinds of non-modal dialogs. It does this by implementing many of the features needed by dialogs for you that are already baked into the browser. This is helpful as it reduces the burden on the developer when making their applications accessible by ensuring that user expectations concerning interaction are met, and it can also potentially simplify the implementation of dialogs in general. Basic usage Adding a dialog using the new tag can be achieved with just a few lines of code. ` However, adding the dialog alone won’t do anything to the page. It will show up only once you call the .showModal() method against it. ` Then if you want to close it you can call the .close() method on the dialog, or press the escape key to close it, just like most other modals work. Also, note how a backdrop appears that darkens the rest of the page and prevents you from interacting with it. Neat! Accessibility and focus management Correctly handling focus is important when making your web applications accessible to all users. Typically you have to move the current focus to the active dialog when showing them, but with the dialog element that’s done for you. By default, the focus will be set on the first focusable element in the dialog. You can optionally change which element receives focus first by setting the autofocus attribute on the element you want the focus to start on, as seen in the previous example where that attribute was added to the close element. Using the .showModal() method to open the dialog also implicitly adds the dialog ARIA role to the dialog element. This helps screen readers understand that a modal has appeared and the screen so it can act accordingly. Adding forms to dialogs Forms can also be added to dialogs, and there’s even a special method value for them. If you add a element with the method set to dialog then the form will have some different behaviors that differ from the standard get and post form methods. First off, no external HTTP request will be made with this new method. What will happen instead is that when the form gets submitted, the returnValue property on the form element will be set to the value of the submit button in the form. So given this example form: ` The form element with the example-form id will have its returnValue set to Submit. In addition to that, the dialog will close immediately after the submit event is done being handled, though not before automatic form validation is done. If this fails then the invalid event will be emitted. You may have already noticed one caveat to all of this. You might not want the form to close automatically when the submit handler is done running. If you perform an asynchronous request with an API or server you may want to wait for a response and show any errors that occur before dismissing the dialog. In this case, you can call event.preventDefault() in the submit event listener like so: ` Once your desired response comes back from the server, you can close it manually by using the .close() method on the dialog. Enhancing the backdrop The backdrop behind the dialog is a mostly translucent gray background by default. However, that backdrop is fully customizable using the ::backdrop pseudo-element. With it, you can set a background-color to any value you want, including gradients, images, etc. You may also want to make clicking the backdrop dismiss the modal, as this is a commonly implemented feature of them. By default, the <dialog> element doesn’t do this for us. There are a couple of changes that we can make to the dialog to get this working. First, an event listener is needed so that we know when the user clicks away from the dialog. ` Alone this event listener looks strange. It appears to dismiss the dialog whenever the dialog is clicked, not the backdrop. That’s the opposite of what we want to do. Unfortunately, you cannot listen for a click event on the backdrop as it is considered to be part of the dialog itself. Adding this event listener by itself will effectively make clicking anywhere on the page dismiss the dialog. To correct for this we need to wrap the contents of the dialog content with another element that will effectively mask the dialog and receive the click instead. A simple element can do! ` Even this isn’t perfect though as the contents of the div may have elements with margins in them that will push the div down, resulting in clicks close to the edges of the dialog to dismiss it. This can be resolved by adding a couple of styles the the wrapping div that will make the margin stay contained within the wrapper element. The dialog element itself also has some default padding that will exacerbate this issue. ` The wrapping div can be made into an inline-block element to contain the margin, and by moving the padding from the parent dialog to the wrapper, clicks made in the padded portions of the dialog will now interact with the wrapper element instead ensuring it won’t be dismissed. Conclusion Using the dialog element offers significant advantages for creating dialogs and modals by simplifying implementation with reasonable default behavior, enhancing accessibility for users that need assistive technologies such as screen readers by using automatic ARIA role assignment, tailored support for form elements, and flexible styling options....

Oct 25, 2024

4 mins

HTMLJavaScript

JavaScript Errors: An Introductory Primer

JavaScript Errors are an integral part of the language, and its runtime environment. They provide valuable feedback when something goes wrong during the execution of your script. And once you understand how to use and handle Errors, you'll find them a much better debugging tool than always reaching for console.log. Why Use Errors? When JavaScript throws errors, it's usually because there's a mistake in the code. For example, trying to access properties of null or undefined would throw a TypeError. Or trying to use a variable before it has been declared would throw a ReferenceError. But these can often be caught before execution by properly linting your code. More often, you'll want to create your own errors in your programs to catch problems unique to what you're trying to build. Throwing your own errors can make it easier for you to interrupt the control flow of your code when necessary conditions aren't met. Why would you want to use Error instead of just console.logging all sorts of things? Because an Error will force you to address it. JavaScript is optimistic. It will do its best to execute despite all sorts of issues in the code. Just logging some problem might not be enough to notice it. You could end up with subtle bugs in your program and not know! Using console.log won't stop your program from continuing to execute. An Error, however, interrupts your program. It tells JavaScript, "we can't proceed until we've fixed this problem". And then JavaScript happily passes the message on to you! Using Errors in JavaScript Here's an example of throwing an error: ` When an Error is thrown, nothing after that throw in your scope will be executed. JavaScript will instead pass the Error to the nearest error handler higher up in the call stack. If no handler is found, the program terminates. Since you probably don't want your programs to crash, it's important to set up Error handling. This is where something like try / catch comes in. Any code you write inside the try will attempt to execute. If an Error is thrown by anything inside the try, then the following catch block is where you can decide how to handle that Error. ` In the catch block, you receive an error object (by convention, this is usually named error or err, but you could give it any name) which you can then handle as needed. Asynchronous Code and Errors There are two ways to write asynchronous JavaScript, and they each have their own way of writing Error handling. If you're using async / await, you can use the try / catch block as in the previous example. However, if you're using Promises, you'll want to chain a catch to the Promise like so: ` Understanding the Error Object The Error object is a built-in object that JavaScript provides to handle runtime errors. All types of errors inherit from it. Error has several useful properties. - message: Probably the most useful of Error's properties, message is a human-readable description of the error. When creating a new Error, the string you pass will become the message. - name: A string representing the error type. By default, this is Error. If you're using a built-in sub-class of Error like TypeError, it will be that instead. Otherwise, if you're creating a custom type of Error, you'll need to set this in the constructor. - stack: While technically non-standard, stack is a widely supported property that gives a full stack trace of where the error was created. - cause: This property allows you to give more specific data when throwing an error. For example, if you want to add a more detailed message to a caught error, you could throw a new Error with your message and pass the original Error as the cause. Or you could add structured data for easier error analysis. Creating an Error object is quite straightforward: ` In addition to the generic Error, JavaScript provides several built-in sub-classes of Error: - EvalError: Thrown when a problem occurs with the eval() function. This only exists for backwards compatibility, and will not be thrown by JavaScript. You shouldn't use eval() anyway. - InternalError: Non-standard error thrown when something goes wrong in the internals of the JavaScript engine. Really only used in Firefox. - RangeError: Thrown when a value is not within the expected range. - ReferenceError: Thrown when a value doesn't exist yet / hasn't been initialized. - SyntaxError: Thrown when a parsing error occurs. - TypeError: Thrown when a variable is not of the expected type. - URIError: Thrown when using a global URI handling function incorrectly. Each of these error types inherits from the Error object and generally adds no additional properties or methods, but they do change the name property to reflect the error type. Making Your Own Custom Errors It's sometimes useful to extend the Error object yourself! This lets you add properties to particular Errors you throw, as well as easily check in catch blocks if an Error is of a particular type. To extend Error, use a class. ` In this example, CustomError extends the Error class. It changes the name to CustomError and gives it the new property foo: 'bar'. You can then throw your CustomError, check if the error in your catch block is an instance of the CustomError, and access the properties associated with your CustomError. This gives you a lot more control over how Errors are structured and validated, which could greatly aid with debugging because your errors won't all just be Errors. Common Confusions There are many ways that using Errors can go subtly wrong. Here are some of the common issues to keep in mind when working with Error. Failure to Catch When an Error is thrown, the program will cease executing anything else in its scope and start working its way back up the call stack until it finds a catch block to deal with the Error. If it never finds a catch, the program will crash. So it's important to make sure you actually catch your errors, or else you might terminate your program unintentionally for small and recoverable issues. It's especially helpful to think about catching errors when you're executing code from external libraries which you don't control. You may import a function to handle something for you, and it unexpectedly throws an Error. You should anticipate this possibility and ask yourself: "Should this code go inside of a try / catch block?" to prevent an error like this from crashing your code. Network Requests Don't Throw on 400 and 500 Statuses You might want to make a request to an API, and then handle an error if the request fails. ` Maybe you made a bad request and got back a 400. Maybe you're not properly authenticated and got a 401 or 403. Maybe the endpoint is invalid and you get a 404. Or maybe the server is having a bad day and you get a 500. In none of those cases will you get an Error! From JavaScript's point of view, your request worked. You sent some data to a place, and the place sent you something back. Mission accomplished! Except it's not. You need to deal with these HTTP error statuses. So if you want to handle responses that aren't OK, you need to do it explicitly. To fix the previous example: ` You Can Throw Anything You should throw new Errors. But you could throw 'literally anything'. There's nothing forcing you to only throw an Error. However, it's a lot harder to handle your errors if there's no consistency in what to expect in your catch blocks. It's a best practice to only throw an Error and not any other kind of JavaScript object. This problem becomes especially clear in TypeScript, when the default type of an error in a catch block is not Error, but unknown. TypeScript has no way to know if an error passed into the catch is going to actually be an Error or not, which can make it more frustrating to write error handling code. For this reason, it's often a good idea to check what exactly you've received before trying to handle it. ` (Alas, you cannot throw 🥳. That's a SyntaxError. But throw new Error('🥳') is still perfectly valid!) Conclusion Wielding JavaScript Errors is a big upgrade from console.logging all the things and hoping for the best. And it's not very hard to do it well! By using Error, your apps will be much more explicit in how you expect things to work, and how you expect things might not work. And when something does go wrong, you'll be more likely to notice and better equipped to figure out the problem....

Jul 14, 2023

6 mins

JavaScript

Learning Paths for Next.JS Developers with Ankita Kulkarni

In this video, Rob Ocel and co-hosts Tracy Lee, Adam Rackis, and Danny Thompson talk with tech educator Ankita Kulkarni about her journey from engineering leader to full-time educator. Ankita shares insights on teaching Next.js, bridging practical knowledge gaps, and helping developers tackle real-world challenges. They discuss Next.js as a React-based framework, its benefits, and the challenges it presents for beginners. Chapters - Introduction to the Podcast and Guests 00:01 - Meet Ankita Kulkarni, Tech Educator 00:26 - Ankita's Transition to Full-Time Education 01:41 - Teaching Practical Knowledge in Next.js 03:19 - Effective Methods for Teaching Next.js 05:27 - Challenges of Being a Full-Time Educator 07:48 - Balancing Broad and Specific Examples 09:54 - Embracing Mistakes as a Teaching Tool 12:13 - Pair Programming and Mentorship 14:00 - Discussion on Next.js and Framework Adoption 16:48 - Advantages and Challenges of Next.js 18:12 - Choosing the Right Framework for Your Needs 20:35 - Impact of Next.js in React Documentation 22:26 - Learning Paths for New Developers 23:24 - The Rise of Full-Stack Web Development 25:09 - Benefits of Frameworks Abstracting Complexity 26:27 - OpenNext and Deployment Flexibility 28:06 - Ankita's Excitement for New Next.js Features 30:35 - The Future of Next.js Without Vercel 32:16 - Final Thoughts and Where to Find Everyone Online 34:21 Follow Ankita Kulkarni on Social Media Twitter: https://x.com/kulkarniankita9 YouTube: https://www.youtube.com/@kulkarniankita Sponsored by This Dot: thisdot.co...

Nov 12, 2024

2 mins

NextJSJavaScript

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Creating Custom Scrollbars with React

Structure of a Scrollbar

Hide Native Scrollbars

Custom Scrollbar Functionality

Laying out Scrollbar Elements

Sizing the Thumb

Handle the Position of the Thumb

Handle Clicking the Buttons

Handle Clicking the Track

Handle Dragging the Thumb

Full Code and Demo

Tom VanAntwerp

You might also like

The Journey To Making A New Framework: TanStack Start with Tanner Linsley

The HTML Dialog Element: Enhancing Accessibility and Ease of Use

JavaScript Errors: An Introductory Primer

Learning Paths for Next.JS Developers with Ankita Kulkarni

Let's innovate together!

You might also like

The Journey To Making A New Framework: TanStack Start with Tanner Linsley

The HTML Dialog Element: Enhancing Accessibility and Ease of Use

JavaScript Errors: An Introductory Primer

Learning Paths for Next.JS Developers with Ankita Kulkarni