Horizontal Scroll with Padding.

Theerapat Muangpoon — Thu, 23 Feb 2023 16:56:44 +0000

Today, let's try to implement the horizontal scrolling component.

We start from trying to implement it in a naive way. First, we make the red boxes to be inline-block to allow them to sit next to each other. Then we apply white-space: nowrap; and overflow-x: auto; to the wrapper of these boxes to make them horizontally scroll.

<div class="wrapper">
  <h1>Header</h1>

  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

.row {
  white-space: nowrap;
  overflow-x: auto;
}

.box {
  display: inline-block;
}

/* These are for cosmetics  */
.wrapper {
  border: 1px solid black;
  width: 350px;
  padding: 32px;
}

.box {
  width: 100px;
  height: 80px;
  background-color: red;
  margin-right: 8px;
}

And here is the result of the naive approach.

The content (red boxes) does not go to the left border of the wrapper when we scroll. The same goes for the right border too. This is because the padding of the wrapper forces these boxes to live inside their confined space. Another not-so-nice thing about this is that the horizontal scroll bar is too close to the boxes, making it look ugly.

Fix padding problems.

In the past, to fix these problems, I would have removed the padding of the wrapper and apply padding to <h1/> and .row one by one. However, I just learned another way of fixing these problems by only applying styles to the relevant element, which is .row class. Much easier, right?

The technique here is to use a negative margin to remove the effect of padding from the wrapper. I learned this technique from Josh Comeau's CSS for JavaScript developer course.

.row {
  white-space: nowrap;
  overflow-x: auto;

  /* remove wrapper's padding effect */
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 32px;
  margin-left : -32px;
  margin-right: -32px;
  margin-bottom: -32px;
}

...

Here's a codepen link to play around with the final result.

To sum up, this negative margin technique can be applied to remove the padding effect of the wrapper. In other words, use it on the element that want to ignore the padding of the wrapper. This can also be the case of the image element that wants to go full width while other elements still want to respect that margin.

Code-Splitting in React Router v6.4 without flicker using React.lazy and Suspense

Theerapat Muangpoon — Sat, 11 Feb 2023 09:20:10 +0000

Before React Router v6.4 introduced, we used to setup our routes using <BrowserRouter /> like this.

// main.jsx

import { BrowserRouter, Routes, Route } from "react-router-dom"

// code splitting using React.lazy
const Dashboard = React.lazy(() => import("./dashboard"))

function App() {
  return (
    <React.Suspense fallback="loading...">
      <BrowserRouter>
        <Routes>
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </BrowserRouter>
    </React.Suspense>
  )
}

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

We do code splitting to avoid loading the JavaScript code of the entire app. However, by using this setup, Content Layout Shift (CLS) occurs when user changes route because of the React.lazy ("loading..." will show for a brief second, causing the page to flicker). With the introduction of Data APIs in React Router v6.4, we can avoid this flicker. But first, let's migrate to the new Data API router.

Use the new Data API router

Since the React Router v6.4 Data APIs has been released, we can now setup our routers using createBrowserRouter together with createRoutesFromElements function as follows

// main.jsx

import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
} from "react-router-dom"

const Dashboard = React.lazy(() => import("./dashboard"))

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route
      path="/dashboard"
      element={
        <React.Suspense fallback="loading...">
          <Dashboard />
        </React.Suspense>
      }
    />
  )
)

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
)

Now we can introduce a loader function to import <Dashboard /> and avoid the CLS issue.

Use loader to eliminate Content Layout Shift

Since we are using React Router Data APIs, we can provide our loader function. We can import <Dashboard /> inside the loader and await for the import to be finished before rendering the component. By doing so, we can skip the React.Suspense behaviour and therefore remove CLS at the same time.

// dashboard-loader.jsx

import React from "react"

let Dashboard = React.lazy(() => import("./dashboard"))

export async function lazyDashboardLoader() {
  const componentModule = await import("./dashboard")
  // This avoid flicker from React.lazy by using the component directly
  Dashboard = componentModule.default

  return null
}

export function LazyDashboard() {
  return (
    <React.Suspense fallback="loading...">
      <Dashboard />
    </React.Suspense>
  )
}

// main.tsx

import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
} from "react-router-dom"
import { LazyDashboard, lazyDashboardLoader } from "./dashboard-loader"

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route
      path="/dashboard"
      element={<LazyDashboard />}
      loader={lazyDashboardLoader}
    />
  )
)

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
)

Now, our app can be as lightweight as we want and we will not see the flicker caused by React.Suspense.

This article is inspired by React Router 6.4 Code-Splitting by Ruben Cases and Matt's code snippet but adjusted to make it suitable for a project not currently using Data Loader.

Forem: Theerapat Muangpoon

Horizontal Scroll with Padding.

Fix padding problems.

Code-Splitting in React Router v6.4 without flicker using React.lazy and Suspense

Use the new Data API router

Use loader to eliminate Content Layout Shift