Well, fear not! I’ve cracked the code for building components that trigger and respond to keyboard shortcuts. In this article, I’ll teach you how to create them with React, Tailwind CSS, and Framer Motion.

Table of Content

Here’s everything we’ll cover:

• Prerequisites

• What Is a Keyboard Shortcut Listener (KSL) Component?

• How to Build the KSL Component

• How to Create the Reveal Component

• How to Trigger the Component via Keyboard Shortcut

• How to Animate the Component’s Visibility

• How to Optimize Your KSL Component

• Conclusion

Prerequisites

• Fundamentals of HTML, CSS, and Tailwind CSS

• Fundamentals of JavaScript, React, and React Hooks.

What Is a Keyboard Shortcut Listener (KSL) Component?

A Keyboard Shortcut Listener component (KSLC) is a component that listens for specific key combinations and triggers actions in your app. It's designed to make your app respond to keyboard shortcuts, allowing for a smoother, more efficient user experience.

Why is it important?

• Accessibility: The KSL component makes it simple for people who use a keyboard to trigger actions, making your app more inclusive and easy to use.

• Snappier Experience: Shortcuts are quick and efficient, allowing users to get things done in less time. No more fumbling around for the mouse—just hit a key (or two) and boom, action happens!

• Reusability: Once you’ve set up your KSL, it can handle different shortcuts across your app, making it easy to add without rewriting the same logic.

• Cleaner Code: Instead of scattering keyboard event listeners everywhere, the KSL component keeps things tidy by centralising the logic. Your code stays clean, organized, and easier to maintain.

How to Build the KSL Component

I've prepared a GitHub repository with starter files to speed things up. Simply clone this repo and install the dependencies.

For this project, we’re using Tailwind’s home page as our muse and creating the KSL functionality. After installing and running the build command, here’s what your page should look like:

How to Create the Reveal Component

The reveal component is the component we want to show when we use the shortcut.

To begin, create a file called search-box.tsx and paste in this code:

export default function SearchBox() {
  return (
    <div className="fixed top-0 left-0 w-full h-full backdrop-blur-sm bg-slate-900/50 ">
      {" "}
      <div className=" p-[15vh] text-[#939AA7] h-full">
        <div className="max-w-xl mx-auto divide-y divide-[#939AA7] bg-[#1e293b] rounded-md">
          <div className="relative flex justify-between px-4 py-2 text-sm ">
            <div className="flex items-center w-full gap-2 text-white">
              <BiSearch size={20} />
              <input
                type="text"
                className="w-full h-full p-2 bg-transparent focus-within:outline-none"
                placeholder="Search Documentation"
              />
            </div>
            <div className="absolute -translate-y-1/2 right-4 top-1/2 ">
              <kbd className="p-1 text-xs rounded-[4px] bg-[#475569] font-sans font-semibold text-slate-400">
                <abbr title="Escape" className="no-underline ">
                  Esc{" "}
                </abbr>{" "}
              </kbd>
            </div>
          </div>
          <div className="flex items-center justify-center p-10 text-center ">
            <h2 className="text-xl">
              How many licks does it take to get to the center of a Tootsie pop?
            </h2>
          </div>
        </div>
      </div>
    </div>
  );
}

Ok, so what’s happening in this code?

1. Main Overlay (<div className="fixed top-0 left-0 ...">)

   • This is the full-screen overlay that dims the background.

   • The backdrop-blur-sm adds a subtle blur to the backdrop, and bg-slate-900/50 gives it a semi-transparent dark overlay.

2. Search Box Wrapper (<div className="p-[15vh] ...">)

   • The content is centered using padding and flex utilities.

   • The max-w-xl makes sure that the search box stays within a reasonable width for readability.

Then in your App.tsx, create a state that dynamically shows that component:

const [isOpen, setIsOpen] = useState<boolean>(false);

• useState: This hook initializes isOpen to false, meaning the search box is hidden by default.

• When isOpen is set to true, the SearchBox component will render on the screen.

And render the search component:

  {isOpen && <SearchBox />}

To show the search component, add a toggle function to the input button:

<button
  type="button"
  className="items-center hidden h-12 px-4 space-x-3 text-left rounded-lg shadow-sm sm:flex w-72 ring-slate-900/10 focus:outline-none hover:ring-2 hover:ring-sky-500 focus:ring-2 focus:ring-sky-500 bg-slate-800 ring-0 text-slate-300 highlight-white/5 hover:bg-slate-700"
  onClick={() => setIsOpen(true)}>
  <BiSearch size={20} />
  <span className="flex-auto">Quick search...</span>
   <kbd className="font-sans font-semibold text-slate-500">
   <abbr title="Control" className="no-underline text-slate-500">
    Ctrl{" "}
    </abbr>{" "}
    K
   </kbd>
</button>

The onClick event sets isOpen to true, displaying the SearchBox.

But as you’ve seen, this was triggered by a click action, not a keyboard shortcut action. Let’s do that next.

How to Trigger the Component via Keyboard Shortcut

To make the reveal component open and close using a keyboard shortcut, we’ll use a useEffect hook to listen for specific key combinations and update the component’s state accordingly.

Step 1: Listen for Keyboard Events

Add an useEffect hook in your App.tsx file to listen for key presses:

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.ctrlKey && event.key === Key.K) {
        event.preventDefault(); // Prevent default browser behavior

      }    };

    window.addEventListener("keydown", handleKeyDown);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, []);

What’s happening in this code?

1. Effect Setup (useEffect)

   • useEffect ensures that the event listener for key presses is added when the component mounts and cleaned up when the component unmounts, preventing memory leaks.

2. Key Combination (event.ctrlKey && event.key === "k")

   • The event.ctrlKey checks if the Control key is being pressed.

   • The event.key === "k" ensures we’re listening specifically for the "K" key. Together, this checks if the Ctrl + K combination is pressed.

3. Prevent Default Behavior (event.preventDefault())

   • Some browsers may have default behaviors tied to key combinations like Ctrl + K (e.g., focusing the browser’s address bar). Calling preventDefault stops this behavior.

4. Event Cleanup (return () => ...)

   • The cleanup function removes the event listener to prevent duplicate listeners from being added if the component re-renders.

Step 2: Toggle Component Visibility

Next, update the handleKeyDown function to toggle the SearchBox visibility when the shortcut is pressed:

useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      // Listen for Ctrl + K
      if (event.ctrlKey && event.key === Key.K) {
        event.preventDefault(); // Prevent default browser behavior
        setIsOpen((prev) => !prev); // Toggle the search box
      } else if (event.key === Key.Escape) {
        setIsOpen(false); // Close the search box
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, []);

What’s happening in this code?

1. Toggling State (setIsOpen((prev) => !prev))

   • When Ctrl + K is pressed, the setIsOpen state setter toggles the visibility of the SearchBox.

   • The prev argument represents the previous state. Using !prev flips its value:

     • true (open) becomes false (close).

     • false (closed) becomes true (open).

2. Closing with the Escape Key (event.key === "Escape")

   • When the Escape key is pressed, setIsOpen(false) explicitly sets the state to false, closing the SearchBox.

This results in the following:

How to Animate the Component’s Visibility

At the moment, our component works, but it lacks a little flair, wouldn’t you say? Let’s change that.

Step 1: Create the Overlay Component

We’ll start by creating an overlay component, which acts as the dark, blurred backdrop for the search box. Here’s the base version:

import { ReactNode } from "react";

export default function OverlayWrapper({ children }: { children: ReactNode }) {
  return (
    <div
      className="fixed top-0 left-0 w-full h-full backdrop-blur-sm bg-slate-900/50 ">
      {children}
    </div>
  );
}

Step 2: Add Animations to the Overlay

Now, let’s make the overlay fade in and out using Framer Motion. Update the OverlayWrapper component like this:

import { motion } from "framer-motion";
import { ReactNode } from "react";

export default function OverlayWrapper({ children }: { children: ReactNode }) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed top-0 left-0 w-full h-full backdrop-blur-sm bg-slate-900/50 ">
      {children}
    </motion.div>
  );
}

Key animation props:

• initial: Sets the starting state when the component is mounted (fully transparent).

• animate: Defines the state to animate toward (fully opaque).

• exit: Specifies the animation when the component is unmounted (fading out).

Step 3: Animate the Search Box

Next, add some motion to the search box itself. We’ll make it slide and fade in when it appears and slide out when it disappears.

import { motion } from "framer-motion";
import { BiSearch } from "react-icons/bi";
import OverlayWrapper from "./overlay";

export default function SearchBox() {
  return (
    <OverlayWrapper>
      <motion.div
        initial={{ y: "-10%", opacity: 0 }}
        animate={{ y: "0%", opacity: 1 }}
        exit={{ y: "-5%", opacity: 0 }}
        className=" p-[15vh] text-[#939AA7] h-full">
        <div
          className="max-w-xl mx-auto divide-y divide-[#939AA7] bg-[#1e293b] rounded-md"
        >
          <div className="relative flex justify-between px-4 py-2 text-sm ">
            <div className="flex items-center w-full gap-2 text-white">
              <BiSearch size={20} />
              <input
                type="text"
                className="w-full h-full p-2 bg-transparent focus-within:outline-none"
                placeholder="Search Documentation"
              />
            </div>
            <div className="absolute -translate-y-1/2 right-4 top-1/2 ">
              <kbd className="p-1 text-xs rounded-[4px] bg-[#475569] font-sans font-semibold text-slate-400">
                <abbr title="Escape" className="no-underline ">
                  Esc{" "}
                </abbr>{" "}
              </kbd>
            </div>
          </div>
          <div className="flex items-center justify-center p-10 text-center ">
            <h2 className="text-xl">
              How many licks does it take to get to the center of a Tootsie pop?
            </h2>
          </div>
        </div>
      </motion.div>
    </OverlayWrapper>
  );
}

Step 4: Enable Animation Tracking with AnimatePresence

Finally, wrap your conditional rendering logic in the AnimatePresence component provided by Framer Motion. This ensures Framer Motion tracks when elements enter and leave the DOM.

<AnimatePresence>{isOpen && <SearchBox />}</AnimatePresence>

This enables Framer Motion to track when an element enters and leaves the DOM. With this, we get the following result:

Ah, much better!

How to Optimize Your KSL Component

If you thought we were done, not so fast…We still have a little more to do.

We need to optimize for accessibility. We should add a way for users to close the search component with a mouse, as accessibility is very important.

To do this, start by creating a hook called useClickOutside. This hook uses a reference element to know when a user is clicking outside the target element (search box) which is a very popular behaviour for closing modals and KSLCs.

import { useEffect } from "react";

type ClickOutsideHandler = (event: Event) => void;

export const useClickOutside = (
  ref: React.RefObject<HTMLElement>,
  handler: ClickOutsideHandler
) => {
  useEffect(() => {
    const listener = (event: Event) => {
      // Do nothing if clicking ref's element or descendant elements
      if (!ref.current || ref.current.contains(event.target as Node)) return;

      handler(event);
    };

    document.addEventListener("mousedown", listener);
    document.addEventListener("touchstart", listener);

    return () => {
      document.removeEventListener("mousedown", listener);
      document.removeEventListener("touchstart", listener);
    };
  }, [ref, handler]);
};

To use this hook, pass in the function responsible for opening and closing the search component:

<AnimatePresence> {isOpen && <SearchBox close={setIsOpen} />} </AnimatePresence>

Then receive the function in the search with its proper prop type:

export default function SearchBox({
  close,
}: {
  close: React.Dispatch<React.SetStateAction<boolean>>;
}) {

After that, create a reference (ref) to the item you want to track and mark that element:

import { motion } from "framer-motion";
import { useRef } from "react";
import { BiSearch } from "react-icons/bi";
import { useClickOutside } from "../hooks/useClickOutside";
import OverlayWrapper from "./overlay";

export default function SearchBox({
  close,
}: {
  close: React.Dispatch<React.SetStateAction<boolean>>;
}) {
  const searchboxRef = useRef<HTMLDivElement>(null);
  return (
    <OverlayWrapper>
      <motion.div
        initial={{ y: "-10%", opacity: 0 }}
        animate={{ y: "0%", opacity: 1 }}
        exit={{ y: "-5%", opacity: 0 }}
        className=" p-[15vh] text-[#939AA7] h-full">
        <div
          className="max-w-xl mx-auto divide-y divide-[#939AA7] bg-[#1e293b] rounded-md"
          ref={searchboxRef}>
          <div className="relative flex justify-between px-4 py-2 text-sm ">
            <div className="flex items-center w-full gap-2 text-white">
              <BiSearch size={20} />
              <input
                type="text"
                className="w-full h-full p-2 bg-transparent focus-within:outline-none"
                placeholder="Search Documentation"
              />
            </div>
            <div className="absolute -translate-y-1/2 right-4 top-1/2 ">
              <kbd className="p-1 text-xs rounded-[4px] bg-[#475569] font-sans font-semibold text-slate-400">
                <abbr title="Escape" className="no-underline ">
                  Esc{" "}
                </abbr>{" "}
              </kbd>
            </div>
          </div>
          <div className="flex items-center justify-center p-10 text-center ">
            <h2 className="text-xl">
              How many licks does it take to get to the center of a Tootsie pop?
            </h2>
          </div>
        </div>
      </motion.div>
    </OverlayWrapper>
  );
}

Then pass in that ref and the function to be called when a click outside that element is detected.

useClickOutside(searchboxRef, () => close(false));

Testing it out now gives the following result:

We can also optimize the code a bit more. Like we did with the accessibility feature, we can make out listener for detecting shortcuts much cleaner and efficient with the following steps.

First, create a useKeyBindings hook file for handling key press combinations.

Then define the hook and the Interface. The hook will accept an array of bindings, where each binding consists of:

• A keys array, which specifies the key combination (for example, ["Control", "k"])

• A callback function, which gets called when the corresponding keys are pressed.

import { useEffect } from "react";

// Define the structure of a keybinding
interface KeyBinding {
  keys: string[]; // Array of keys (e.g., ["Control", "k"])
  callback: () => void; // Function to execute when the keys are pressed
}

export const useKeyBindings = (bindings: KeyBinding[]) => {

};

Next, create the handleKeyDown function. Inside the hook, define a function that will listen for keyboard events. This function will check if the pressed keys match any defined key combinations.

We'll normalize the keys to lowercase so that the comparison is case-insensitive and track which keys are pressed by checking for ctrlKey, shiftKey, altKey, metaKey, and the key pressed (for example, "k" for Ctrl + K).

const handleKeyDown = (event: KeyboardEvent) => {
  // Track the keys that are pressed
  const pressedKeys = new Set<string>();

  // Check for modifier keys (Ctrl, Shift, Alt, Meta)
  if (event.ctrlKey) pressedKeys.add("control");
  if (event.shiftKey) pressedKeys.add("shift");
  if (event.altKey) pressedKeys.add("alt");
  if (event.metaKey) pressedKeys.add("meta");

  // Add the key that was pressed (e.g., "k" for Ctrl + K)
  if (event.key) pressedKeys.add(event.key.toLowerCase());
};

Next, we’ll compare the pressed keys with the keys array from our bindings to check if they match. If they do, we’ll call the associated callback function. We also ensure that the number of pressed keys matches the number of keys defined in the binding.

// Loop through each keybinding
bindings.forEach(({ keys, callback }) => {
  // Normalize the keys to lowercase for comparison
  const normalizedKeys = keys.map((key) => key.toLowerCase());

  // Check if the pressed keys match the keybinding
  const isMatch =
    pressedKeys.size === normalizedKeys.length &&
    normalizedKeys.every((key) => pressedKeys.has(key));

  // If the keys match, call the callback
  if (isMatch) {
    event.preventDefault(); // Prevent default browser behavior
    callback(); // Execute the callback function
  }
});

Finally, set up event listeners on the window object to listen for keydown events. These listeners will trigger the handleKeyDown function whenever a key is pressed. Make sure to add clean up the event listeners when the component unmounts.

useEffect(() => {
  // Add event listeners for keydown
  window.addEventListener("keydown", handleKeyDown);

  // Cleanup the event listeners when the component unmounts
  return () => {
    window.removeEventListener("keydown", handleKeyDown);
  };
}, [bindings]);

The full useKeyBindings hook now put together looks like this:

import { useEffect } from "react";

interface KeyBinding {
  keys: string[]; // A combination of keys to trigger the callback (e.g., ["Control", "k"])
  callback: () => void; // The function to execute when the keys are pressed
}

export function useKeyBindings(bindings: KeyBinding[]) {
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      bindings.forEach(({ keys, callback }) => {
        const normalizedKeys = keys.map((key) => key.toLowerCase());
        const pressedKeys = new Set<string>();

        // Track modifier keys explicitly
        if (event.ctrlKey) pressedKeys.add("control");
        if (event.shiftKey) pressedKeys.add("shift");
        if (event.altKey) pressedKeys.add("alt");
        if (event.metaKey) pressedKeys.add("meta");

        // Add the actual key pressed
        if (event.key) pressedKeys.add(event.key.toLowerCase());

        // Match exactly: pressed keys must match the defined keys
        const isExactMatch =
          pressedKeys.size === normalizedKeys.length &&
          normalizedKeys.every((key) => pressedKeys.has(key));

        if (isExactMatch) {
          event.preventDefault(); // Prevent default behavior
          callback(); // Execute the callback
        }
      });
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, [bindings]);
}

Here’s how you can use this hook in your App:

import { useKeyBindings } from "./hooks/useKeyBindings";

export default function App() {
  const [isOpen, setIsOpen] = useState<boolean>(false);

  useKeyBindings([
    {
      keys: ["Control", "k"], // Listen for "Ctrl + K"
      callback: () => setIsOpen((prev) => !prev), // Toggle the search box
    },
    {
      keys: ["Escape"], // Listen for "Escape"
      callback: () => setIsOpen(false), // Close the search box
    },
  ]);

Which gives the following result:

With this approach, you can even add multiple shortcuts to trigger the search component’s visibility.

useKeyBindings([
    {
      keys: ["Control", "k"], // Listen for "Ctrl + K"
      callback: () => setIsOpen((prev) => !prev), // Toggle the search box
    },
    {
      keys: ["Control", "d"], // Listen for "Ctrl + D"
      callback: () => setIsOpen((prev) => !prev), // Toggle the search box
    },
    {
      keys: ["Escape"], // Listen for "Escape"
      callback: () => setIsOpen(false), // Close the search box
    },
  ]);

Here are links to all the resources you may need for this article:

• Starter files

• Final

Conclusion

I hope this article felt like a well-timed shortcut, getting you to the heart of building reusable keyboard shortcut components. With every keypress and animation, you can now turn ordinary web experiences extraordinary ones.

I hope your shortcuts help you create apps that click with your users. After all, the best journeys often start with just the right combination.

Like my articles?

Feel free to buy me a coffee here, to keep my brain chugging and provide more articles like this.

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

• Twitter / X: @jajadavid8

• LinkedIn: David Jaja

• Email: Jajadavidjid@gmail.com

After quite a journey of trial and error, I found WebCurate, a platform that felt like the instruction manual I’d been missing.

In this article, I’ll take you through how WebCurate helped me simplify my journey with Kreed and share tips on discovering the best tools for your projects.

What We’ll Cover

• What is WebCurate?: An overview of WebCurate’s platform

• How WebCurate Works: A look at WebCurate's curated categories to streamline your workflow.

• Finding the Right Tools: Tips for searching, filtering, and using WebCurate’s curated recommendations.

• Making the Most of WebCurate: Advice on leveraging the platform for your specific needs, with an example of finding a relevant tool.

• Essential Tools Discovered on WebCurate: A look at the essential tools WebCurate helped me discover for Kreed’s development and how they might help you.

What is WebCurate?

WebCurate is a free platform designed to help developers, startups, and tech enthusiasts find high-value tools without the overwhelm.

Unlike other resources that flood you with endless options, WebCurate handpicks practical, relevant tools and resources tailored for productivity and development.

What makes WebCurate unique is its comprehensive scope. It offers a curated range of design tools and inspiration, developer tools, API integrations, debugging utilities, productivity aids, and even insights into industry trends.

Each resource on WebCurate is chosen for its ability to genuinely enhance workflow and project outcomes, so you spend less time searching and more time building.

How WebCurate Works

WebCurate provides resources across essential categories, like design assets, developer tools, and productivity guides. Think of it like a “greatest hits” album but for tools.

The platform features resources that span several essential areas:

• Design Assets: From UI kits to icons and templates, WebCurate provides carefully selected design resources that can help developers and designers keep their projects on track without feeling lost in a sea of options.

• Developer Tools: This includes everything from code libraries to APIs and frameworks that can speed up development workflows. Tools like these are sorted into categories to ensure you find the best fit for your tech stack.

• Industry Guides: WebCurate also offers practical guides tools, insights, and case studies to help developers stay ahead of industry trends and optimize their strategies.

Finding the Right Tools: Tips for Navigation

Efficient Search & Filtering

WebCurate’s search and filtering functions make it simple to find exactly what you need, fast. Whether you’re after an API for a new feature or a project management tool, these features help narrow your options to the most relevant tools quickly and effectively.

Curated Recommendations

What sets WebCurate apart is its thoughtful curation. Instead of suggesting random, popular tools, it presents resources that address real developer needs, based on industry trends and emerging technologies. This means you’re seeing tools that make an impact—tailored to current, practical needs.

Example: Task Management Tools

For instance, searching for “task management” within the "Productivity" filter quickly revealed tools aligned with my development approach.

By using filters for categories like "Development" or "Productivity," WebCurate connects you with tools tailored to your tech stack.

How You Can Make the Most of WebCurate

I’ve told you a bit about how WebCurate helped me find essential tools and resources while building Kreed. But let’s be real, the value of a tool lies in how you use it.

So, if you’re thinking about trying WebCurate out for your next project or even just to optimize your workflow, here’s how you can make the most of it:

1. Start with Your Needs: The first step is identifying what you actually need. Are you a developer trying to optimize your front-end stack? A product manager looking for tools to boost team productivity? Or maybe you’re just exploring new ways to streamline your projects? WebCurate’s search and filtering system allows you to narrow down tools based on what you're looking for, so spend some time defining your needs.

2. Use the Developer Section to Your Advantage: For anyone working in tech, the Developer section is a must. It’s tailored to provide the most relevant resources for developers, from libraries and frameworks to APIs and deployment tools. For me, it saved hours of research and trial and error. Don’t just browse the section—dig into it, explore the recommendations, and filter by categories or specific tools you’re interested in.

3. Filter and Refine Your Search: WebCurate lets you filter by categories like design, front-end development, back-end tools, and even productivity. When you search, take the time to refine your results so you’re only seeing what’s most relevant. For instance, if you’re building a React app, filter for tools that integrate well with React—WebCurate will show you options that are perfect for your tech stack. And since every tool is vetted by the community, you know you’re not wasting time with gimmicks.

4. Keep an Open Mind and Explore: While it’s helpful to focus on exactly what you’re looking for, WebCurate also encourages a bit of exploration outside your comfort zone. You might stumble upon a tool or resource you hadn’t thought of but that could genuinely elevate your project. Just don’t get lost in endless scrolling—keep your objective in mind. It’s easy to get sidetracked exploring, but remember, you’re here to find tools that push your project forward, not to doom scroll your way to zero productivity.

5. Experiment with New Tools and Stay Updated: Building a product is fundamentally about iteration, and this principle extends to the tools you choose to support it. WebCurate is a dynamic resource that updates daily with fresh recommendations, making it a valuable tool for discovering new options. Even if you don't need a new tool right now, it's worth revisiting regularly for innovative ideas that could prove useful in the future.

Essential Tools I Discovered on WebCurate

Here’s a rundown of a few tools that I found interesting on WebCurate—some are longtime favourites, while others were discoveries that have quickly become essentials.

Tools I Already Use (and Still Love)

• Supabase: An open-source Firebase alternative that simplifies backend development with real-time updates and intuitive database management.

• GSAP: A powerful animation library for creating smooth, high-performance animations (I even wrote an article about how I use it!).

• JsonViewer: A practical tool for viewing and formatting JSON data, making debugging and visualization easier.

• CanIUse: An essential resource for checking browser compatibility across HTML5, CSS3, SVG, and more—perfect for ensuring cross-platform support.

New Tools I Use Often or Plan on Using Soon

• Pesticide for Chrome: A Chrome extension that outlines page elements, helping spot layout issues and verify alignment quickly.

• WindUI: A component library styled with Tailwind CSS, that speeds up development without compromising design quality.

• Mobbin: A curated collection of mobile design patterns, offering inspiration to refine and elevate mobile UI elements.

• Mightly Meld: A collaborative design tool for React that makes feedback gathering and design iteration faster and more streamlined.

• Rowy: A no-code platform connecting directly to databases, allowing for rapid development and deployment of data-driven applications without extensive code.

Wrapping It Up

At the end of the day, building a startup is a mix of hustle, luck, and learning on the fly. And this article just represents a nerd like me geeking out over tools that made a difference (and resisting the urge to gatekeep 😂).

Finding WebCurate didn’t magically solve all my challenges, but it did cut down on the noise and brought useful resources to my fingertips—a massive win when every minute counts.

If you’re on your startup journey, know this is only part of the ride. Maybe one day I’ll share the full highs and lows of being a founder—assuming I get a break from being Batman 🦇.

Like my articles?

Feel free to buy me a coffee here, to keep my brain chugging and provide more articles like this.

Want to connect?

• Twitter / X: @jajadavid8

• LinkedIn: David Jaja

• Email: Jajadavidjid@gmail.com

In this article, we'll dive into Optimistic UI and explore how it works and keeps your web experience smooth as butter. We'll build a simple task app together that'll show how Optimistic UI can help turn mundane tasks into lightning-fast interactions that leave your users feeling happy.

Prerequisites

• Fundamentals of JavaScript and React
• Fundamentals of Async programming and Axios
• Knowledge of hook-oriented fetch libraries would also be beneficial

What We'll Cover:

1. What is Optimistic UI?
2. Why Does Optimistic UI Matter?
3. Other Benefits of Optimistic UI
4. Introducing SWR: Stale-While-Revalidate
5. How to Set Up the Environment
6. How to Build the Task App UI
   – Regular CRUD UI
   – Optimistic CRUD UI
7. Drawbacks of Optimistic UI
8. Ideal Use Cases for Optimistic UI
9. Conclusion

What is Optimistic UI?

At its core, Optimistic UI is all about keeping your app feeling snappy and responsive, even when a lot is happening behind the scenes. It's like having a superpower that lets your app predict the future – well, sort of.

When you perform an action in your app – whether it's adding a new item to a list or updating a profile – Optimistic UI kicks in to make it happen right away, without waiting for confirmation from the server. It's the ultimate optimist, always assuming everything will work out just fine.

Why Does Optimistic UI Matter?

So why should you care about Optimistic UI? Simple: because it's the secret sauce that turns good apps into great ones.

Think about it: when you click a button, you expect something to happen – and you expect it to happen fast. That's where Optimistic UI shines. By giving your users instant feedback and keeping your app feeling snappy, Optimistic UI enhances the overall user experience.

No more staring at loading screens or wondering if your click actually did anything – with Optimistic UI, every action feels easy and effective.

Other Benefits of Optimistic UI

1. Reduced Perceived Latency: Optimistic UI reduces the perceived latency of actions by displaying changes immediately without waiting for server confirmation. This creates a perception of faster response times, even if server communication takes longer.
2. Improved Responsiveness: Optimistic UI allows users to interact with the app continuously without interruptions from loading spinners or waiting screens. This uninterrupted flow enhances the overall responsiveness of the application.
3. Support for Complex Interactions: Optimistic UI helps complex interactions, such as drag-and-drop, multi-step processes, and real-time collaboration, feel fluid and intuitive. This flexibility opens up possibilities for innovative features and functionalities in the app.
4. Increased User Engagement: The responsiveness and interactivity provided by Optimistic UI can lead to increased user engagement and retention. Users are more likely to return to an app that provides a smooth and enjoyable experience.

Introducing SWR: Stale-While-Revalidate

Before we dive into the implementation, let's take a moment to talk about SWR. SWR is a lightweight React Hook library for data fetching. SWR stands for Stale-While-Revalidate, and it strikes the perfect balance between performance and freshness when fetching data in your React applications.

SWR also automatically revalidates data in the background while still serving stale data from the cache. This means your app stays fast and responsive, even when fetching fresh data from the server.

But that's not all – SWR also supports key features like caching, pagination, and error handling, making it a powerful tool in your arsenal for building fast, reliable web applications as well as implementing Optimistic UI.

How to Set Up the Environment

I've prepared a GitHub repository with starter files to speed things up. Simply clone this repo and install the dependencies.

The starter code consists of the basic JSX components required, as well as some basic Axios functions for performing CRUD operations. After installing all the necessary packages with npm i, open your terminal and start up your local endpoint using json-server.

npx json-server data/db.json -p 3500

To see all your data present, head over to that route:

Showing initial data

How to Build the Task App UI

In this section, we’ll first implement CRUD applications without Optimistic UI and then with Optimistic UI to show the differences between them.

Regular CRUD UI

Start by heading over to your TaskContainer component, then use the useSWR hook to call your fetch function.

const {
    isLoading,
    error,
    data: tasks,
    mutate,
  } = useSWR(cacheKey, fetchTasks, {
    onSuccess: (data) =>
      data.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)),
  });

SWR uses a similar data fetching hook and pattern to other libraries such as React Query (TanStack Query) and Redux Toolkit Query. This hook fetching pattern often returns a loading state, an error state, your fetched data (if any) and a mutation function (but more about that later).

Note: The cacheKey is a unique key used to notify SWR when and where to re-call your function. The onSuccess function is a method used to trigger another action when the fetch is successful – in this case, sorting the data in descending order.

With your data back, you can now create the JSX markup.

return (

      <div className="flex flex-col gap-8 p-4">

        <div className="p-4 shadow-lg ">
          <div className="flex flex-col gap-4 ">
            {tasks &&
              tasks.map((task, index) => {
                return (
                  <div
                    key={task.id}
                    className="flex gap-4 items-center py-2 px-6 rounded-md bg-[#74a0a6]">
                    <div>
                      <label
                        htmlFor={`task-${task.id}`}
                        key={task.id}
                        className={`flex gap-4 text-[14px] items-center font-bold list-none p-4 rounded bg-[#88adb3] cursor-pointer hover:bg-[#609299]`}>
                        <div className="inline-flex items-center">
                          <label
                            className="relative flex items-center p-3 rounded-full cursor-pointer"
                            htmlFor="checkbox">
                            <input
                              type="checkbox"
                              name={`task-${task.id}`}
                              id={`task-${task.id}`}
                              className="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-[#edebd9] transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-lines checked:bg-[#545240] checked:before:bg-[#edebd9] hover:before:opacity-10 before:checked:hover:before:opacity-10 "
                              checked={task.completed}
                                                         />
                            <span className="absolute transition-opacity opacity-0 pointer-events-none text-stone-100 top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100">
                              <svg
                                xmlns="http://www.w3.org/2000/svg"
                                className="h-3.5 w-3.5"
                                viewBox="0 0 20 20"
                                fill="currentColor"
                                stroke="currentColor"
                                strokeWidth="1">
                                <path
                                  fillRule="evenodd"
                                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                  clipRule="evenodd"></path>
                              </svg>
                            </span>
                          </label>
                        </div>
                      </label>
                    </div>
                    <div>
                      <h2 className="text-xl font-bold text-[#161515] ">
                        {task.title}
                      </h2>
                      <p className="text-sm font-semibold text-[#42403f] ">
                        {task.description}
                      </p>
                      <div className="flex gap-2 mt-2 text-xs font-bold">
                        <div className="flex items-center ">
                          <img
                            src={userImages[index]}
                            alt=""
                            className="w-10 h-10 rounded-full "
                          />
                          <span> {task.assignedTo}</span>
                        </div>
                      </div>
                    </div>
                    <div
                      className="p-2 ml-auto rounded-full cursor-pointer hover:bg-red-300"
                    >
                      <FaTrash color="#545240" />
                    </div>
                  </div>
                );
              })}
          </div>
        </div>
      </div>

  );

UI after data fetching

After that, head into your Taskform component and create a form UI for creating new tasks.

import { addSingleTask } from "./services/api";
import toast from "react-hot-toast";
import { useState } from "react";

export default function Taskform() {
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [assignedTo, setAssignedTo] = useState("");

  return (
    <div className="bg-[#74a0a6] p-4 rounded-md">
      <form className="flex flex-col w-full gap-2 ">
        <label htmlFor="title">
          <p className="font-bold ">Title</p>
          <input
            type="text"
            className="w-full font-medium  focus:outline-[#74a0a6] focus-within:outline-[#74a0a6] p-1 bg-transparent border rounded-md"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
          />
        </label>

        <label htmlFor="description">
          <p className="font-bold ">Description</p>
          <input
            type="text"
            className="w-full font-medium  focus:outline-[#74a0a6] focus-within:outline-[#74a0a6] p-1 bg-transparent border rounded-md"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
          />
        </label>

        <label htmlFor="assignedTo">
          <p className="font-bold ">Assigned To</p>
          <input
            type="text"
            className="w-full font-medium  focus:outline-[#74a0a6] focus-within:outline-[#74a0a6] p-1 bg-transparent border rounded-md"
            value={assignedTo}
            onChange={(e) => setAssignedTo(e.target.value)}
          />
        </label>
        <button className="p-2 mt-3 border text-white rounded-md w-max hover:bg-white hover:text-[#74a0a6]">
          Add
        </button>
      </form>
    </div>
  );
}

After that, import it into your TaskContainer component.

return (

      <div className="flex flex-col gap-8 p-4">
        <Taskform />
        <div className="p-4 shadow-lg ">
          <div className="flex flex-col gap-4 ">
            {tasks &&
              tasks.map((task, index) => {

UI with Form added

To add a new task, create a handler function in the Taskform, then import your POST function from your API file.

const addTaskMutation = async (e) => {
    e.preventDefault();
    const createdAt = new Date().toISOString(); // Get current timestamp as a string

    try {
      await addSingleTask({
        title,
        description,
        assignedTo,
        completed: false,
        createdAt,
      });

      toast.success("Task added succesfully.");
      setTitle("");
      setDescription("");
      setAssignedTo("");
    } catch (err) {
      toast.error("Failed to add the new task.");
    }
  };

Finally, call the mutate function after your POST function call to enable SWR to invalidate your current data and make a new request. You can get this mutate function from the useSWR hook in the TaskContainer, then pass it through props to the form.

const {
    isLoading,
    error,
    data: tasks,
    mutate,
  } = useSWR(cacheKey, fetchTasks, {
    onSuccess: (data) =>
      data.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)),
  });
  return (
    <div className="flex flex-col gap-8 p-4">
      <Taskform mutate={mutate} />

Then call it in the TaskForm.

import { addSingleTask } from "./services/api";
import toast from "react-hot-toast";
import { useState } from "react";

export default function Taskform({ mutate }) {
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [assignedTo, setAssignedTo] = useState("");

  const addTaskMutation = async (e) => {
    e.preventDefault();
    const createdAt = new Date().toISOString();
    try {
      await addSingleTask({
        title,
        description,
        assignedTo,
        completed: false,
        createdAt,
      });
      mutate();

      toast.success("Task added succesfully.");
      setTitle("");
      setDescription("");
      setAssignedTo("");
    } catch (err) {
      toast.error("Failed to add the new task.");
    }
  };
  return (
    <div className="bg-[#74a0a6] p-4 rounded-md">
      <form
        className="flex flex-col w-full gap-2 "
        onSubmit={(e) => addTaskMutation(e)}>
        <label htmlFor="title">
          <p className="font-bold ">Title</p>
          <input
            type="text"
            className="w-full font-medium  focus:outline-[#74a0a6] focus-within:outline-[#74a0a6] p-1 bg-transparent border rounded-md"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
          />
        </label>

        <label htmlFor="description">
          <p className="font-bold ">Description</p>
          <input
            type="text"
            className="w-full font-medium  focus:outline-[#74a0a6] focus-within:outline-[#74a0a6] p-1 bg-transparent border rounded-md"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
          />
        </label>

        <label htmlFor="assignedTo">
          <p className="font-bold ">Assigned To</p>
          <input
            type="text"
            className="w-full font-medium  focus:outline-[#74a0a6] focus-within:outline-[#74a0a6] p-1 bg-transparent border rounded-md"
            value={assignedTo}
            onChange={(e) => setAssignedTo(e.target.value)}
          />
        </label>
        <button className="p-2 mt-3 border text-white rounded-md w-max hover:bg-white hover:text-[#74a0a6]">
          Add
        </button>
      </form>
    </div>
  );
}

Testing your component now gives the following result:

Regular Create Operation

As you can see, the list is updated after each form submission. But this still doesn’t highlight our need for optimistic UI. You’re probably thinking, if the operation happened that fast, why bother with Optimistic UI?

What's the point gif

Well, for starters, no real-world application is ever going to beat the speed of your local JSON server, as the data is readily available to you and users often have unstable network connections.

Let's slow down the fetch to illustrate a real-world data request better. This better simulates a real-world scenario as users often come from different locations that have varying internet speeds.

Start by creating a delay function that runs before each of your function calls.

import axios from "axios";

const tasksApi = axios.create({
  baseURL: "http://localhost:3500",
});

export const tasksUrlEndpoint = "/tasks";

const delay = () => new Promise((res) => setTimeout(() => res(), 1200));

export const fetchTasks = async () => {
   await delay();
  const response = await tasksApi.get(tasksUrlEndpoint);
  return response.data;
};

export const addSingleTask = async ({
  title,
  description,
  completed,
  assignedTo,
  createdAt,
}) => {
  await delay();
  const response = await tasksApi.post(tasksUrlEndpoint, {
    title,
    description,
    completed,
    assignedTo,
    createdAt,
  });
  return response.data;
};

export const updateSingleTask = async (task) => {
  await delay();
  const response = await tasksApi.patch(`${tasksUrlEndpoint}/${task.id}`, task);
  return response.data;
};

export const deleteSingleTask = async ({ id }) => {
  await delay();
  return await tasksApi.delete(`${tasksUrlEndpoint}/${id}`, id);
};

Then attempt your create operation again.

Create operation after delay

As you may have noticed, the create operation was only fired after the delay function (spanning 1.2 seconds) finished running, which caused a brief spell of inactivity on the screen.

The usual way to handle those periods between loading is usually a loading spinner or indicator telling you that some background activity is running. But this often disrupts your flow when working in the application, and quite frankly is disappointing.

The same static effect can be seen in the update operation, where users have to wait for server confirmation to see fresh data.

const updateTaskMutation = async (updatedTask) => {
    try {
      await updateSingleTask(updatedTask);
      mutate();
      toast.success("Successfully updated task");
    } catch (err) {
      toast.error("Failed to update the task.");
    }
  };

  return (
    <div className="flex flex-col gap-8 p-4">
      <Taskform mutate={mutate} />
      <div className="p-4 shadow-lg ">
        <div className="flex flex-col gap-4 ">
          {tasks &&
            tasks.map((task, index) => {
              return (
                <div
                  key={task.id}
                  className="flex gap-4 items-center py-2 px-6 rounded-md bg-[#74a0a6]">
                  <div>
                    <label
                      htmlFor={`task-${task.id}`}
                      key={task.id}
                      className={`flex gap-4 text-[14px] items-center font-bold list-none p-4 rounded bg-[#88adb3] cursor-pointer hover:bg-[#609299]`}>
                      <div className="inline-flex items-center">
                        <label
                          className="relative flex items-center p-3 rounded-full cursor-pointer"
                          htmlFor="checkbox">
                          <input
                            type="checkbox"
                            name={`task-${task.id}`}
                            id={`task-${task.id}`}
                            className="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-[#edebd9] transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-lines checked:bg-[#545240] checked:before:bg-[#edebd9] hover:before:opacity-10 before:checked:hover:before:opacity-10 "
                            checked={task.completed === true}
                            onChange={() =>
                              updateTaskMutation({
                                ...task,
                                completed: !task.completed,
                              })
                            }
                          />
                          <span className="absolute transition-opacity opacity-0 pointer-events-none text-stone-100 top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100">
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              className="h-3.5 w-3.5"
                              viewBox="0 0 20 20"
                              fill="currentColor"
                              stroke="currentColor"
                              strokeWidth="1">
                              <path
                                fillRule="evenodd"
                                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                clipRule="evenodd"></path>
                            </svg>
                          </span>
                        </label>
                      </div>
                    </label>
                  </div>
                  <div>
                    <h2 className="text-xl font-bold text-[#161515] ">
                      {task.title}
                    </h2>
                    <p className="text-sm font-semibold text-[#42403f] ">
                      {task.description}
                    </p>
                    <div className="flex gap-2 mt-2 text-xs font-bold">
                      <div className="flex items-center ">
                        <img
                          src={userImages[index]}
                          alt=""
                          className="w-10 h-10 rounded-full "
                        />
                        <span> {task.assignedTo}</span>
                      </div>
                    </div>
                  </div>
                  <div
                    className="p-2 ml-auto rounded-full cursor-pointer hover:bg-red-300"
                   >
                    <FaTrash color="#545240" />
                  </div>
                </div>
              );
            })}
        </div>
      </div>
    </div>
  );
}

Update operation after delay

And in the delete operation, which also waits for server conformation to rehydrate the page.

const deleteTaskMutation = async ({ id }) => {
    try {
      await deleteSingleTask({ id });
      mutate();
      toast.success("Successfully deleted task");
    } catch (err) {
      toast.error("Failed to delete the task.");
    }
  };
  return (
    <div className="flex flex-col gap-8 p-4">
      <Taskform mutate={mutate} />
      <div className="p-4 shadow-lg ">
        <div className="flex flex-col gap-4 ">
          {tasks &&
            tasks.map((task, index) => {
              return (
                <div
                  key={task.id}
                  className="flex gap-4 items-center py-2 px-6 rounded-md bg-[#74a0a6]">
                  <div>
                    <label
                      htmlFor={`task-${task.id}`}
                      key={task.id}
                      className={`flex gap-4 text-[14px] items-center font-bold list-none p-4 rounded bg-[#88adb3] cursor-pointer hover:bg-[#609299]`}>
                      <div className="inline-flex items-center">
                        <label
                          className="relative flex items-center p-3 rounded-full cursor-pointer"
                          htmlFor="checkbox">
                          <input
                            type="checkbox"
                            name={`task-${task.id}`}
                            id={`task-${task.id}`}
                            className="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-[#edebd9] transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-lines checked:bg-[#545240] checked:before:bg-[#edebd9] hover:before:opacity-10 before:checked:hover:before:opacity-10 "
                            checked={task.completed === true}
                            onChange={() =>
                              updateTaskMutation({
                                ...task,
                                completed: !task.completed,
                              })
                            }
                          />
                          <span className="absolute transition-opacity opacity-0 pointer-events-none text-stone-100 top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100">
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              className="h-3.5 w-3.5"
                              viewBox="0 0 20 20"
                              fill="currentColor"
                              stroke="currentColor"
                              strokeWidth="1">
                              <path
                                fillRule="evenodd"
                                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                clipRule="evenodd"></path>
                            </svg>
                          </span>
                        </label>
                      </div>
                    </label>
                  </div>
                  <div>
                    <h2 className="text-xl font-bold text-[#161515] ">
                      {task.title}
                    </h2>
                    <p className="text-sm font-semibold text-[#42403f] ">
                      {task.description}
                    </p>
                    <div className="flex gap-2 mt-2 text-xs font-bold">
                      <div className="flex items-center ">
                        <img
                          src={userImages[index]}
                          alt=""
                          className="w-10 h-10 rounded-full "
                        />
                        <span> {task.assignedTo}</span>
                      </div>
                    </div>
                  </div>
                  <div
                    className="p-2 ml-auto rounded-full cursor-pointer hover:bg-red-300"
                    onClick={() => deleteTaskMutation({ id: task.id })}>
                    <FaTrash color="#545240" />
                  </div>
                </div>
              );
            })}
        </div>
      </div>
    </div>
  );
}

Delete operation after delay

These few seconds of inactivity or loading can impact the level of satisfaction users get from your application, which is why we’re going to use Optimistic UI to fix it.

Optimistic CRUD UI

The way this works in practical terms is that, when you perform an action, it immediately adds to your UI state (cache) while the async operation is running in the background.

If the operation is successful, nothing on the UI changes and everything acts like it worked on the first try. But if it fails, the UI state reverts to its previous state and an error is displayed via your toast.

An optimistic UI approach offers a much better user experience than traditional loading messages or spinners. When you see an immediate response after clicking a button, the app feels faster and more responsive, keeping you engaged and satisfied. You can continue interacting with the app seamlessly, without waiting for server confirmations, making the experience smoother and more intuitive.

This immediate feedback reduces your perceived wait time and keeps the interface visually stable, avoiding annoying flickers or sudden changes. Plus, when the app feels this responsive, you're more likely to keep using it and have a positive experience.

On the flip side, loading messages or spinners can interrupt your flow, making the app feel slower and potentially frustrating you.

Optimistic UI diagram

It still sounds a little like gibberish, eh? Well, let’s learn as we go!

In your swrAPI file, create another mutation function. This function takes in two parameters: the new task you want to add and the list of already existing tasks.

export const addTaskMutation = async (newTask, tasks) => {
  };

Then it uses your already existing create function to attempt to create a new task. After this, you store the result and return that result in a new array, together with the already existing tasks.

export const addTaskMutation = async (newTask, tasks) => {
  const addedTask = await addSingleTask(newTask);
  return [...tasks, addedTask].sort(
    (a, b) => new Date(b.createdAt) - new Date(a.createdAt)
  );
};

As you would suspect, this function does the same as the previous create function we wrote, but it’s what comes next that we’re after.

Next, create an options function which is responsible for treating the async operation as a synchronous operation and immediately yields a response.

This function also takes some parameters such as:

• optimisticData: which is the new data you want to display immediately.
• rollbackOnError: which sets the state to the previous one if the request fails.
• populateCache: which immediately sets this optimistic data in our UI state.
• revalidate: which lets us enable or disable another fetch after this function runs.

export const addTaskOptions = (newTask, tasks) => {
  return {
    optimisticData: [...tasks, newTask].sort(
      (a, b) => new Date(b.createdAt) - new Date(a.createdAt)
    ),
    rollbackOnError: true,
    populateCache: true,
    revalidate: false,
  };
};

To use this optimistic UI method with a create operation, import both functions into your TaskForm. Both functions need to be wrapped in the mutate function since they’re both attempting to mutate the data.

import {
  addTaskMutation as addSingleTask,
  addTaskOptions,
} from "./services/swrAPI";

import toast from "react-hot-toast";
import { useState } from "react";

export default function Taskform({ mutate, tasks }) {
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [assignedTo, setAssignedTo] = useState("");

  const addTaskMutation = async (e) => {
    e.preventDefault();
    const createdAt = new Date().toISOString();
    try {

      await mutate(
        addSingleTask(
          {
            title,
            description,
            assignedTo,
            completed: false,
            createdAt,
          },
          tasks
        ),
        addTaskOptions(
          {
            title,
            description,
            assignedTo,
            completed: false,
            createdAt,
          },
          tasks
        )
      ); 
     toast.success("Task added succesfully.");

    } catch (err) {
      toast.error("Failed to add the new task.");
    }
  };

Note: The tasks array is passed into the TaskForm via props for this functionality to work.

To see instances where there might be an error, give your functions a 50/50 chance of success or failure, by adding a random condition.

export const addSingleTask = async ({
  title,
  description,
  completed,
  assignedTo,
  createdAt,
}) => {
  await delay();
  if (Math.random() < 0.5) throw new Error("Failed to add new task");
  const response = await tasksApi.post(tasksUrlEndpoint, {
    title,
    description,
    completed,
    assignedTo,
    createdAt,
  });
  return response.data;
};

export const updateSingleTask = async (task) => {
  await delay();
  if (Math.random() < 0.5) throw new Error("Failed to update task");
  const response = await tasksApi.patch(`${tasksUrlEndpoint}/${task.id}`, task);
  return response.data;
};

export const deleteSingleTask = async ({ id }) => {
  await delay();
  if (Math.random() < 0.5) throw new Error("Failed to update task");
  return await tasksApi.delete(`${tasksUrlEndpoint}/${id}`, id);
};

Testing your create endpoint now gives the following result:

Optimistic UI with Create operation

And voilà! Your app is officially optimistic. It attempts to immediately add the new task to the list even if it fails and gracefully rolls back in the case of an error.

This works similarly for the update operation – starting with the updated update function:

export const updateTaskMutation = async (updatedTask, tasks) => {
  const updatedTaskResponse = await updateSingleTask(updatedTask);
  return tasks.map((task) =>
    task.id === updatedTask.id ? updatedTaskResponse : task
  );
};

Then its corresponding options function:

export const updateTaskOptions = (updatedTask, tasks) => {
  return {
    optimisticData: tasks.map((task) =>
      task.id === updatedTask.id ? updatedTask : task
    ),
    rollbackOnError: true,
    populateCache: true,
    revalidate: false,
  };
};

To test this out, import the new updateSingleTask and updateOptions function in your TaskConatiner, and update the handler function.

const updateTaskMutation = async (updatedTask) => {
    try {
      await mutate(
        updateSingleTask(updatedTask, tasks),
        updateTaskOptions(updatedTask, tasks)
      );
      toast.success("Successfully updated task");
    } catch (err) {
      toast.error("Failed to update the task.");
    }
  };

Which gives the following result:

Optimistic UI with Update operation

And finally for the delete action:

// Function for deleting a task
export const deleteTaskMutation = async (taskToDelete, tasks) => {
  await deleteSingleTask(taskToDelete);
  return tasks.filter((task) => task.id !== taskToDelete.id);
};

// Options for deleting a task
export const deleteTaskOptions = (taskToDelete, tasks) => {
  return {
    optimisticData: tasks.filter((task) => task.id !== taskToDelete.id),
    rollbackOnError: true,
    populateCache: true,
    revalidate: false,
  };
};

Which can be used in the TaskContainer delete handler like so:

const deleteTaskMutation = async ({ id }) => {
    try {
      await mutate(
        deleteSingleTask({ id }, tasks),
        deleteTaskOptions({ id }, tasks)
      );
      toast.success("Successfully deleted task");
    } catch (err) {
      toast.error("Failed to delete the task.");
    }
  };

Which gives this:

Optimistic UI with Delete operation

Drawbacks of Optimistic UI

Now you must be thinking, if optimistic UI is so great, why not use it everywhere?

lighter hairspray gif

Well, like everything, that action turns chaotic without moderation. Here are some reasons why you should use optimistic UI in moderation.

1. Excessive Updates: Optimistic UI might get a bit carried away with updates, especially if your app's moving faster than your internet connection. Too many updates can slow things down, so it's essential to strike a balance.
2. Exposing server-side logic: While offloading all the smarts to your app (like generating unique IDs or checking if that username is already taken) is tempting, remember that your server plays a crucial role too. Letting the front end of your app handle everything can lead to security risks and messy code, so be mindful of where you're putting your logic.
3. Managing Mishaps: While Optimistic UI typically expects smooth sailing, life has a way of throwing curveballs. From a sudden internet hiccup to the server taking an unexpected coffee break, glitches can be quite a headache to manage gracefully.
4. Avoid Rapid Changes: Imagine adding an item to your shopping cart, and then deciding to remove it before the "add" request even reaches the server. It's like changing your mind at the checkout counter – a bit confusing, right? Rapid changes like these can leave your app disoriented, so it's best to proceed cautiously.

Ideal Use Cases for Optimistic UI

While optimistic UI may not be the holy grail of state management you were hoping to discover, it does have some good use cases such as:

1. Instant Messaging Apps: Almost all instant messaging platforms currently use this pattern. Your messages appear instantly in the chat window, even before they're confirmed by the server. This creates a seamless and responsive chatting experience, keeping the conversation flowing effortlessly.
2. Collaborative Editing Tools: Whether you're working on a document with colleagues or collaborating on a project with teammates, Optimistic UI ensures that changes are reflected in real time. As you type, edit, or make updates, your changes are immediately visible to others, fostering collaboration and productivity.
3. Social Media Feeds: Scroll through your social media feed, and you'll see posts, likes, and comments popping up like magic. Optimistic UI ensures that interactions, such as liking a post or leaving a comment, are reflected instantly, providing a more engaging browsing experience.
4. E-commerce Websites: Adding items to your shopping cart, updating quantities, and checking out should feel like a breeze. Optimistic UI speeds up the shopping process by immediately updating your cart and displaying feedback, such as item availability or pricing changes, without delay.

For convenience, here are some resources you may need:

• Starter Code
• Finished Code

I'd like to acknowledge Dave Gray. It was his YouTube video that inspired this article.

Conclusion

As we wrap up our dive into Optimistic UI, it's clear that this technique can be a user experience game-changer. It's the rush of your message popping up instantly or your shopping cart updating in real-time.

Optimistic UI is about speed as well as how it makes users feel – connected, empowered, and delighted. So, next time you click and see the magic unfold, remember: it's not just code...it's the pulse of user happiness (not a Coca-Cola ad 😂). Keep that magic alive in your apps!

Happy coding, and have an optimistic day!

Like my articles?

Feel free to buy me a coffee here, to keep my brain chugging and provide more articles like this.

Coffee Tom

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

• Twitter / X: @jajadavid8
• LinkedIn: David Jaja
• Email: Jajadavidjid@gmail.com

In this article, we’ll talk about npm packages along with their benefits and pitfalls. I'll equip you with the tools and knowledge to help you decide when to use npm packages.

What We'll Cover:

1. What's the Deal with NPM and NPM Packages?
2. Advantages of using NPM Packages
3. The Danger of Over-reliance on NPM Packages
4. Striking a Balance with NPM Packages
5. What to Consider When Choosing an NPM Package
6. Efficient Approach to Using npm Packages – When to Use npm Packages
   – When Using a Package May Not Be Necessary
7. Conclusion

What's the Deal with Npm and Npm Packages?

Npm, short for Node Package Manager, plays a crucial role in the JavaScript community. It serves as both a repository and a manager for open-source Node.js packages.

Through npm, developers gain access to many tools, enabling them to install, share, and manage dependencies within their projects.

Think of npm packages as building blocks for coding. They range from simple utilities to elaborate frameworks, streamlining development efforts. Instead of starting from scratch for every challenge, you can leverage these components from your digital toolkit to help accelerate your projects.

Advantages of Using NPM Packages

NPM brings with it a large number of advantages such as:

Efficiency Boost: Rather than spending hours figuring out a solution from scratch, npm packages offer a shortcut. They're like little time savers that allow you to implement features and functionalities with just a few lines of code.

Wide Range of Options: From basic utilities to advanced frameworks, there's a package for almost anything. Need to add a slick carousel to your website? There's a package for that. Tired of the peace that code-formatters like Prettier bring and want to embrace violence? You guessed it—there's a package for that too! Heck, need to check if a value (number) equals 13 😂? NPM can help.

With npm, the possibilities are virtually endless, giving you access to a world of pre-built solutions at your fingertips.

Community Collaboration: One of the great things about npm is the strong sense of community it creates. Developers from around the globe actively add to the npm ecosystem by creating and sharing packages. This means you're not just depending on your skills – you're benefiting from the collective knowledge and experience of many developers.

If you run into a problem with a package, you can simply check out forums or GitHub repositories where someone else may have encountered the same issue and can help out. It's like having a team of experienced experts ready to lend a hand whenever you need it.

Modularity and Code Reusability: NPM packages encourage a modular approach to development, which is like organising your code into neat little building blocks. This makes your codebase more maintainable, scalable, and easier to debug. Plus, it promotes code reusability, allowing you to leverage existing packages in multiple projects.

Streamlined Development Workflow: With npm packages, you can streamline your development workflow and focus on what you do best—building awesome stuff.

Instead of getting bogged down in the nitty-gritty details of implementation, you can quickly integrate existing solutions and move on to the next task. This allows you to iterate faster, meet deadlines more efficiently, and ultimately deliver better results to your clients or users.

The Danger of Over-reliance on NPM Packages

So, here's the deal: while npm packages can be like a magical fix for coding difficulties, they also come with some downsides. Let me share a story from my time learning with my mentor, let's call him Hihi.

Wink meme

Hihi was all about building strong coding skills from the ground up. He often said, "Packages are handy shortcuts, but if you rely on them too much, you might end up stuck."

I remember how he'd challenge me to build UI components like dropdown menus, sliders, animations and so on without using any packages. It was tough, but it taught me a lot about how things work behind the scenes.

Hihi had seen firsthand how relying too much on packages could trip up developers. He'd tell me about people he knew who struggled to implement features when they didn't have their trusty packages to lean on. It wasn't just about being a coding genius—it was about understanding the fundamentals and learning to think outside the box.

And you know what? Hihi was right. Building stuff from scratch pushed me to understand the code and solve my problems when things got tricky.

Why You Shouldn't Overuse NPM Packages

Dependency Overload: Adding each npm package to your project also means adding its dependencies. This can lead to a mess of dependencies that become tricky to handle and keep up to date.

Plus, updating a package can sometimes cause unexpected issues, potentially breaking your application's functionality.

Security Risks: Not all npm packages are created equal. Some may contain vulnerabilities or even malicious code (often seen in the terminal right after installing a package), putting your projects at risk. Relying too heavily on packages without vetting them properly can leave your projects vulnerable to attacks.

Maintenance Burden: When you rely on npm packages for essential functionality, you're at the mercy of the package maintainers. If a package gets deprecated or stops receiving updates, you're left scrambling to find a replacement or fix the issue yourself.

Loss of Creativity: Over-reliance on npm packages can stifle our creativity as developers. Instead of thinking critically and problem-solving independently, you may default to using packages as a crutch. This can hinder your growth and development as a programmer, limiting your ability to tackle new challenges and innovate.

Increased Bundle Size: Integrating each npm package into your project adds to the overall bundle size, and depending on various factors, some packages (Looking at you, styled-components 😒😂) can bulk up significantly.

This can pose a notable challenge, particularly if speed and performance are important for your application. Larger bundles may result in sluggish load times, which negatively affect user experience and even your search engine rankings.

Overhead of Unused Code: NPM packages often come with a lot of extra code that you may not need for your project. This unused code adds unnecessary overhead to your application, bloating the file size and slowing down performance.

Compatibility Concerns: Mixing and matching npm packages can sometimes lead to compatibility issues, especially when different packages are written in different programming languages or use conflicting versions of dependencies.

For example, if one package is written in JavaScript and another in TypeScript, they may play poorly together, leading to errors and unexpected behaviour.

Striking a Balance with NPM Packages

Now hold on a minute, I don’t want you to think that NPM is all bad. NPM packages can be super helpful and you shouldn't fear them.

Rather, I want you to cultivate the rationale behind your decision-making when choosing npm packages.

Choosing the right npm packages can be a bit like navigating a maze—you want to find the shortest, most efficient path to your destination without getting lost along the way.

So how do you balance leveraging the benefits of npm packages and avoiding the potential pitfalls? Let's break it down.

What to Consider When Choosing an NPM Package

• How Much of the Package You'll Use: Consider how much of the package you'll use in your project. If you only need one or two features, building those features yourself may be more efficient.
• Package Size: Larger packages contribute to increased bundle size, which can impact performance. Opt for smaller, more lightweight packages whenever possible.
• Complexity of Functionality: Evaluate whether the functionality provided by the package is fairly complex to implement from scratch. If so, using the package may save time and effort.
• Project Time Estimate: Consider the timeline of your project. If you're working on a tight deadline, using npm packages can speed up development and meet project milestones more quickly.
• Maintenance and Support: Prioritize packages with ongoing maintenance and strong community support. Opt for those with dedicated maintainers and an active community, as they are more likely to receive prompt updates and assistance when needed.
• Compatibility: Ensure that the package is compatible with your project's tech stack, including programming languages, frameworks, and dependencies.

To better guide you, here’s a flowchart of how your decision-making process can go.

How to decide which npm packages to use - and whether to use them.

As seen in the graph above, each step is built on the next, aiding you in making a sound choice when picking a package.

Efficient Approach to Using npm Packages

While packages can be incredibly useful for streamlining development and adding advanced features, it's important to consider when you should use them and when it might not be necessary.

When to Use npm Packages

• Routing: If your web app needs complex navigation, grabbing a battle-tested routing library like React Router can make your life a lot easier. These packages handle dynamic route matching, nested routes, and more, saving you time and headaches.
• Form Validation: Save yourself the headache of reinventing the validation wheel. To streamline your form validation process, utilize specialized form validation libraries like Formik for React or VeeValidate for Vue.js. These libraries ensure consistent validation behavior across your forms, without the hassle of building it from scratch.
• Animations: Want to dazzle your users with smooth and engaging animations? You can use animation libraries like Framer Motion or GreenSock (GSAP). These libraries provide an array of tools to help you achieve complex animations with minimal effort, whether it's animating components, transitions, or scroll-based effects.
• Styling: When it comes to styling, CSS-in-JS libraries like styled-components or Emotion can be powerful allies. While they may not be necessary for simple styling needs, they shine in projects requiring dynamic styling, theming, or responsive design. These libraries offer powerful styling capabilities and component-level encapsulation, making styling a breeze.
• UI Components: Building custom UI components from scratch can be time-consuming, especially for complex components like date pickers or data tables. Integrating well-designed UI component libraries such as ShadCN, Ant Design, or Tailwind CSS can accelerate development and ensure a consistent look and feel across your application.

When Using a Package May Not Be Necessary

• Basic Utility Functions: For simple utility functions or helper methods, writing them yourself may be more efficient rather than adding an additional dependency. It also keeps your codebase lightweight and avoids unnecessary dependencies.
• Custom Business Logic: If your project requires highly specialized or domain-specific logic, relying on generic npm packages may not be suitable. Building custom solutions tailored to your project's unique requirements can offer greater flexibility and control over functionality.
• Performance Optimization: While npm packages can provide convenient solutions, they may also introduce overhead and impact performance. For performance-critical aspects of your application, consider optimizing code internally rather than relying on external dependencies.
• Learning and Skill Development: Building features from scratch offers valuable opportunities for learning and skill development. Consider tackling certain challenges without relying on packages to deepen your understanding of underlying concepts and enhance your problem-solving abilities.

Conclusion

Remember, npm packages are like tools in a toolbox—useful when needed, but not always necessary.

Before reaching for a package, consider whether it aligns with your project's goals and whether you could achieve the same result with a custom solution.

So next time you're tempted to grab a package, pause and ask yourself: "Do I need it? Do I really need it? Do I…?" You get the idea.

Like my articles?

Feel free to buy me a coffee here, to keep my brain chugging and provide more articles like this.

Coffee Tom

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

• Twitter / X: @jajadavid8
• LinkedIn: David Jaja
• Email: Jajadavidjid@gmail.com

Rating systems are everywhere, from the classic star ratings on movie review websites to the ubiquitous thumbs up/down on streaming platforms. They guide our choices, shape our opinions, and ultimately influence the success of products and services.

In this article, we will create a movie-themed rating component using the Compound Component pattern in React. I'll guide you through structuring the component, managing its state, and designing an interactive user interface that captures the essence of rating.

Prerequisites

While this article is tailored to be as low-level as possible, having a base understanding of the React compound component pattern is beneficial.

If you don’t have any experience with it, don't worry – I've got you! Just head over to this compound component article where I break it down more extensively. Other prerequisites include.

• Fundamentals of HTML, CSS, and Tailwind CSS
• Fundamentals of JavaScript, React, and React Hooks.

What We'll Cover:

1. Understanding Rating Components
   – What Comprises a Rating Component
   – Advantages of Rating Component
2. How to Build a Rating Component – Regular React Method
   – Compound Component Method
3. How to Upgrade Rating Component
4. And just for fun
5. Conclusion

Understanding Rating Components

Rating components are an essential part of modern web applications, particularly in contexts where user feedback is critical. These components provide a user-friendly interface for people to express their opinions, often in a quantifiable manner.

What Comprises a Rating Component?

A rating component is a UI element that allows users to provide a rating, usually on a fixed scale. Here are the typical elements that make up a rating component:

• Icons or Symbols: These are the visual representations of the rating scale. Common examples include stars, hearts, thumbs, or numerical values.
• Interactive States: These components often change appearance based on user interaction, such as hovering or clicking.
• Feedback Mechanism: Some rating components display immediate feedback, such as highlighting the selected icons or showing the rating value.
• Accessibility Features: Ensuring that the component is accessible to all users, including keyboard navigation and screen readers, is crucial.
• Custom Feedback: Some rating components include a text area allowing users to comment. This feedback helps clarify the reasons behind their ratings and enables them to raise any issues they encounter.

Advantages of Rating Components

Rating components offer several benefits, both for users and developers:

• User Engagement: They make it easy and enjoyable for users to provide feedback, which can increase engagement.
• Quantifiable Feedback: Ratings provide clear, quantifiable data that can be easily analyzed to gauge user satisfaction.
• Guiding Decisions: For other users, ratings help in making informed decisions about movies, products, services, and more.
• Improving Products: For businesses, ratings are invaluable for understanding user preferences and areas for improvement.

How to Build a Rating Component

I've prepared a GitHub repository with starter files to speed things up. Simply clone this repo and install the dependencies.

Let's get this party started

In this section, we'll build a single rating component with regular React, and then rebuild it with the CC pattern.

Regular React Method

You’re probably wondering why we’re going through the hassle of first building the component without the component pattern.

woah peter griffin

Well, while learning the component pattern, I struggled to fully wrap my head around the logic and ended up with a couple of bugs which could have been prevented with better understanding.

To help with this, I found that building a smaller version of the feature before fully implementing the CCP eventually sped up my development process.

To begin, create a RatingComponent and import it into your App component.

import RatingComponent from "./RatingComponent";
import { Toaster } from "react-hot-toast";

export default function App() {
  return (
    <main className=" bg-[#EAF2F8]  gap-4 min-h-[100dvh] flex justify-center items-center flex-col">
      <Toaster />
      <h1 className="text-3xl ">My Ratings Component</h1>
      <RatingComponent />
    </main>
  );
}

Then head over to your RatingComponent and add some basic boilerplate to create a standard rating UI.

import { FiStar } from "react-icons/fi";
export default function RatingComponent() {
  return (
    <div className="flex bg-white items-center justify-between  border border-black rounded-md min-w-[600px]  p-2">
      <div className="p-2 text-base font-semibold">
        Intersteller <span className="text-gray-400 ">(2014)</span>
      </div>
      <div className="flex gap-4 p-2">
        {Array.from({ length: 5 }).map((_, index) => (
          <div key={index} className="flex justify-center">
            <FiStar
              size={25}
              strokeWidth={0}
              fill={"gold"}
              cursor="pointer"
              className="star"
            />
          </div>
        ))}
      </div>
    </div>
  );
}

This makes your UI look like this:

Ratings UI created

At the moment, your UI is static and has no way of changing the rating values. To add interactivity, create a state which holds the initial value of the rating.

const [stars, setStarts] = useState(0);

Then attach the setting handler to update the value of the stars when you click on a star.

<FiStar
    size={25}
    strokeWidth={0}
    fill={"gold"}
    cursor="pointer"
    className="star"
    onClick={() => setStarts(index + 1)}
 />

Note: We’re adding 1 to the set value since arrays are zero-based.

To confirm the value of the star being set on click, add a dynamic fill value to each star.

 <FiStar
   size={25}
   strokeWidth={0}
   fill={index + 1 <= stars ? "gold" : "#D6DBDF"}
   cursor="pointer"
   className="star"
   onClick={() => setStarts(index + 1)}
/>

Which yields the following:

Testing the rating component

To further improve the user feedback, we can convert the meaning of each star and display it to them.

Start by creating an array of labels and colours for the stars.

 const ratingData = [
    { label: "Poor", color: "#E74C3C" },
    { label: "Bad", color: "#E59866" },
    { label: "Okay", color: "#F7DC6F" },
    { label: "Good", color: "#76D7C4" },
    { label: "Great", color: "#229954" },
  ];

Then apply this data to reflect whatever the current ratings are.

export default function RatingComponent() {
  const [stars, setStarts] = useState(0);

  const ratingData = [
    { label: "Poor", color: "#E74C3C" },
    { label: "Bad", color: "#E59866" },
    { label: "Okay", color: "#F7DC6F" },
    { label: "Good", color: "#76D7C4" },
    { label: "Great", color: "#229954" },
  ];
  return (
    <div className="flex bg-white items-center justify-between  border border-black rounded-md min-w-[600px]  p-2">
      <div className="p-2 text-base font-semibold">
        Intersteller <span className="text-gray-400 ">(2014)</span>
      </div>
      <div className="flex gap-4 p-2">
        {Array.from({ length: 5 }).map((_, index) => (
          <div key={index} className="flex justify-center">
            <FiStar
              size={25}
              strokeWidth={0}
              fill={index + 1 <= stars ? "gold" : "#D6DBDF"}
              cursor="pointer"
              className="star"
              onClick={() => setStarts(index + 1)}
            />
          </div>
        ))}
      </div>
      {stars > 0 ? (
        <div
          className="font-semibold min-w-[60px] p-2"
          style={{ color: ratingData[stars - 1]?.color }}>
          {ratingData[stars - 1]?.label}
        </div>
      ) : (
        <p className="font-semibold text-gray-400">No ratings yet...</p>
      )}
    </div>
  );
}

Which gives this:

Testing the rating component with label cues

And ta-da! Your ratings component is fully functional and every user can effectively use it to drop an accurate review.

Compound Component Method

For this method, we’ll take it a step further and create multiple rating components, because if we’re not doing the most, what are we doing? 😌

Start by creating the context for the component.

const RatingContext = createContext();

const MultiRatingsComponent = ({
  children,
  ratingsData,

}) => {
  return (
    <RatingContext.Provider
      value={{
        ratingsData,
      }}>
      <div className="relative">{children}</div>
    </RatingContext.Provider>
  );
};

Since we’re going to be working with multiple sets of data to create numerous rating components, the structure of the data being passed in would differ.

export default function App() {
  const multiRatings = [
    { name: "The Dark Knight", year: 2008, length: 5, rating: 0 },
    { name: "Knives Out", year: 2019, length: 5, rating: 0 },
    { name: "Serendipity", year: 2001, length: 5, rating: 0 },
    { name: "The Dressmaker", year: 2015, length: 5, rating: 0 },
    { name: "The Grand Budapest Hotel", year: 2015, length: 5, rating: 0 },
  ];
  const [ratings, setRatings] = useState(multiRatings);

  return (
    <main className="bg-[#EAF2F8] gap-4 min-h-[100vh] flex justify-center items-center flex-col">
      <Toaster />
      <h1 className="text-3xl">My Ratings Component</h1>
      <MultiRatingsComponent
        ratingsData={ratings}>
      </MultiRatingsComponent>
    </main>
  );
}

Next, flesh out the rest of the component required to make our UI look like the single component we created earlier.

const MultiRatingsComponent = ({
  children,
  ratingsData,

}) => {
  const [userFeedback, setUserFeedback] = useState([]);
  return (
    <RatingContext.Provider
      value={{
        ratingsData,
      }}>
      <div className="relative ">{children}</div>
    </RatingContext.Provider>
  );
};

const Label = ({ name, year }) => {
  return (
    <div className="flex flex-col justify-center gap-1 text-base font-semibold min-w-[220px]">
      <h3>{name}</h3>
      <span className=" text-[12px]  text-[#AAB7B8]">{year}</span>
    </div>
  );
};

const RatingsContainer = () => {
  const { ratingsData, updateRating } = useContext(RatingContext);

  return (
    <div className="min-w-[600px] bg-white rounded-md flex flex-col">
      {ratingsData &&
        ratingsData.map((singleData, index) => (
          <div
            key={index}
            className="flex items-center px-4 py-6 border-[#f7f8f9] gap-[75px] border-[0.5px]">
            <Label name={singleData.name} year={singleData.year} />
            <div className="flex gap-4 ">
              {Array.from({ length: 5 }).map((_, starIndex) => (
                <RatingIcon
                  key={starIndex}
                  filled={starIndex < singleData.rating}
                />
              ))}
            </div>
          </div>
        ))}
    </div>
  );
};

const RatingIcon = ({ filled }) => {
  return (
    <FiStar
      size={25}
      strokeWidth={0}
      fill={filled ? "gold" : "#AAB7B8"}
      cursor="pointer"
      className="star"
    />
  );
};

Then assign each component to its parent to form the compound component.

MultiRatingsComponent.Label = Label;
MultiRatingsComponent.RatingsContainer = RatingsContainer;
MultiRatingsComponent.RatingIcon = RatingIcon;

To see your component UI, nest the RatingsContainer inside its parent (the App component).

export default function App() {
  const multiRatings = [
    { name: "The Dark Knight", year: 2008, length: 5, rating: 0 },
    { name: "Knives Out", year: 2019, length: 5, rating: 0 },
    { name: "Serendipity", year: 2001, length: 5, rating: 0 },
    { name: "The Dressmaker", year: 2015, length: 5, rating: 0 },
    { name: "The Grand Budapest Hotel", year: 2015, length: 5, rating: 0 },
  ];

  const [ratings, setRatings] = useState(multiRatings);

  return (
    <main className="bg-[#EAF2F8] gap-4 min-h-[100vh] flex justify-center items-center flex-col">
      <Toaster />
      <h1 className="text-3xl">My Ratings Component</h1>
      <MultiRatingsComponent
        ratingsData={ratings}>
        <MultiRatingsComponent.RatingsContainer />
      </MultiRatingsComponent>
    </main>
  );
}

With that, your UI should look like this:

Ratings UI with CC pattern

To add our previous functionality where we could set ratings, as well as show their meaning via labels, start by creating an update function in the App component.

  const updateRating = (index, newRating) => {
    setRatings((prevRatings) =>
      prevRatings.map((r, i) => (i === index ? { ...r, rating: newRating } : r))
    );
    console.log(ratings);
  };

This function uses the index of the clicked component to find the particular data, the modifies the rating property based on the star you click on.

To use it, pass it into the MultiRatingsComponent via props, then share it with all its children with its context.

const MultiRatingsComponent = ({
  children,
  ratingsData,
  updateRating,
}) => {
  const [userFeedback, setUserFeedback] = useState([]);
  return (
    <RatingContext.Provider
      value={{
        ratingsData,
        updateRating,
      }}>
      <div className="relative ">{children}</div>
    </RatingContext.Provider>
  );
};

Then consume that context in RatingsContainer.

const RatingsContainer = () => {
  const { ratingsData, updateRating } = useContext(RatingContext);

  return (
    <div className="min-w-[600px] bg-white rounded-md flex flex-col">
      {ratingsData &&
        ratingsData.map((singleData, index) => (
          <div
            key={index}
            className="flex items-center px-4 py-6 border-[#f7f8f9] gap-[75px] border-[0.5px]">
            <Label name={singleData.name} year={singleData.year} />
            <div className="flex gap-4 ">
              {Array.from({ length: 5 }).map((_, starIndex) => (
                <RatingIcon
                  key={starIndex}
                  filled={starIndex < singleData.rating}
                    onClick={() => updateRating(index, starIndex + 1)}
                />
              ))}
            </div>
          </div>
        ))}
    </div>
  );
};

Just before you check the UI, create a RatingsLabel component to show the meaning of each star right next to each star.

const RatingLabel = ({ ratingValue }) => {
  const ratingLabel = [
    { label: "Poor", color: "#E74C3C" },
    { label: "Bad", color: "#E59866" },
    { label: "Okay", color: "#F7DC6F" },
    { label: "Good", color: "#76D7C4" },
    { label: "Great", color: "#229954" },
  ];
  return (
    <>
      {ratingValue > 0 ? (
        <div
          className="font-semibold min-w-[60px] p-2"
          style={{ color: ratingLabel[ratingValue - 1]?.color }}>
          {ratingLabel[ratingValue - 1]?.label}
        </div>
      ) : (
        <p className="font-semibold text-gray-400">No ratings yet...</p>
      )}
    </>
  );
};

MultiRatingsComponent.RatingLabel = RatingLabel;

And nest it in the RatingsContainer.

const RatingsContainer = () => {
  const { ratingsData, updateRating } = useContext(RatingContext);

  return (
    <div className="min-w-[600px] bg-white rounded-md flex flex-col">
      {ratingsData &&
        ratingsData.map((singleData, index) => (
          <div
            key={index}
            className="flex items-center px-4 py-6 border-[#f7f8f9] gap-[75px] border-[0.5px]">
            <Label name={singleData.name} year={singleData.year} />
            <div className="flex gap-4 ">
              {Array.from({ length: 5 }).map((_, starIndex) => (
                <RatingIcon
                  key={starIndex}
                  filled={starIndex < singleData.rating}
                  onClick={() => updateRating(index, starIndex + 1)}
                />
              ))}
            </div>
            <RatingLabel ratingValue={singleData.rating} />
          </div>
        ))}
    </div>
  );
};

Drumroll, please…

Testing the rating component with CC pattern and label cues

With this implementation, you can easily have multiple rating bars, and managing each state would be a breeze.

How to Upgrade the Rating Component

Alas, there’s one functionality we haven't implemented. No great rating component is complete without a form which allows users to express their opinions past a couple of stars.

To create a comment component, create a form and some state to manage that form.

const Comment = () => {
  const [comment, setComment] = useState("");

  return (
    <div className="w-full mt-2 ">
      <label className="p-2 text-base font-semibold ">Comment</label>
      <form className="relative " onSubmit={(e)=> handleSubmit(e)}>
        <textarea
          name="comment"
          placeholder="Add a review"
          value={comment}
          onChange={(e) => setComment(e.target.value)}
          className="w-full p-4 rounded-md resize-none min-h-20"></textarea>
        <button className="font-semibold absolute -bottom-1/2 right-0 border bg-[#5499C7] transition-all hover:bg-[#21618C] rounded-md py-2 px-4 text-white">
          Submit
        </button>
      </form>
    </div>
  );
};

MultiRatingsComponent.Comment = Comment;

Then create a handler function for that form.

  const handleSubmit = (e) => {
    e.preventDefault();

    if (comment.length < 3) {
      toast.error("Please add more text");
      return;
    }

    // Clear the comment input
    setComment("");
  };

To see the comments after a user submits the form, create a state to hold those comments in the parent context.

const MultiRatingsComponent = ({
  children,
  ratingsData,
  updateRating,

}) => {
  const [userFeedback, setUserFeedback] = useState([]);
  return (
    <RatingContext.Provider
      value={{
        ratingsData,
        updateRating,
        userFeedback,
        setUserFeedback,

      }}>
      <div className="relative ">{children}</div>
    </RatingContext.Provider>
  );
};

Then consume that context and store the submitted data in the parent context.

 const { userFeedback, setUserFeedback,} =
    useContext(RatingContext);

  const handleSubmit = (e) => {
    e.preventDefault();

    if (comment.length < 3) {
      toast.error("Please add more text");
      return;
    }

    // Create a new feedback object
    const newFeedback = { comment };

    // Update the userFeedback state
    setUserFeedback([...userFeedback, newFeedback]);

    // Clear the comment input
    setComment("");
  };

To view all the comments left by users, create a UserFeedback component like so:

const UserFeedback = () => {
  const { userFeedback } = useContext(RatingContext);
  return (
    <div className="absolute top-0 px-8 py-2 translate-x-full bg-white rounded-md max-w-[300px] -right-5">
      {userFeedback.length > 0 ? (
        <>
          <h3 className="mb-2 text-xl font-semibold">
            Here are what user think
          </h3>
          <ul>
            {userFeedback.map((user, index) => (
              <li key={index} className="px-2 ">
                <h4>
                  {index + 1}.{" "}
                  <span className="font-semibold ">{user.name} </span> --{" "}
                  {user.text}
                </h4>
              </li>
            ))}
          </ul>
        </>
      ) : (
        <p className="font-semibold ext-xl">No user feedback yet...</p>
      )}
    </div>
  );
};
MultiRatingsComponent.UserFeedback = UserFeedback;

This component consumes the state holding the user comments and displays them on the screen.

Just before we test it out, I wanted to replicate a fun quirk I notice from Google whenever someone views your docs. They assign a random name to each user and so will we.

Head over to your App component and create this array:

 const randomNames = [
    "Anonymous Llama",
    "Mysterious Moose",
    "Stealthy Sloth",
    "Phantom Panda",
    "Incognito Iguana",
    "Unknown Unicorn",
    "Enigmatic Elephant",
    "Ghostly Giraffe",
    "Shadowy Shark",
    "Cryptic Cobra",
    "Silent Swan",
    "Nameless Narwhal",
    "Obscure Octopus",
    "Unseen Uakari",
    "Hidden Hedgehog",
    "Masked Macaw",
    "Veiled Vulture",
    "Concealed Chameleon",
    "Covert Cockatoo",
    "Invisible Impala",
  ];

Then pass it into your MultiRatingsComponent via props.

const MultiRatingsComponent = ({
  children,
  ratingsData,
  updateRating,
  randomNames,
}) => {
  const [userFeedback, setUserFeedback] = useState([]);
  return (
    <RatingContext.Provider
      value={{
        ratingsData,
        updateRating,
        userFeedback,
        setUserFeedback,
        randomNames,
      }}>
      <div className="relative ">{children}</div>
    </RatingContext.Provider>
  );
};

Finally, modify your form handler function to send a random name with the comment.

const Comment = () => {
  const [comment, setComment] = useState("");
  const { userFeedback, setUserFeedback, randomNames } =
    useContext(RatingContext);

  const handleSubmit = (e) => {
    e.preventDefault();

    if (comment.length < 3) {
      toast.error("Please add more text");
      return;
    }

    // Generate a random name between 1 and the length of the array
    const randomName =
      randomNames[Math.floor(Math.random() * randomNames.length)];

    // Create a new feedback object
    const newFeedback = { name: randomName, comment };

    // Update the userFeedback state
    setUserFeedback([...userFeedback, newFeedback]);

    // Clear the comment input
    setComment("");
  };

Finally, render the Comment and UserFeedback components in their parent inside the App component.

export default function App() {
  const multiRatings = [
    { name: "The Dark Knight", year: 2008, length: 5, rating: 0 },
    { name: "Knives Out", year: 2019, length: 5, rating: 0 },
    { name: "Serendipity", year: 2001, length: 5, rating: 0 },
    { name: "The Dressmaker", year: 2015, length: 5, rating: 0 },
    { name: "The Grand Budapest Hotel", year: 2015, length: 5, rating: 0 },
  ];

  const randomNames = [...];

  const [ratings, setRatings] = useState(multiRatings);

  const updateRating = (index, newRating) => {
    setRatings((prevRatings) =>
      prevRatings.map((r, i) => (i === index ? { ...r, rating: newRating } : r))
    );
  };
  return (
    <main className="bg-[#EAF2F8] gap-4 min-h-[100vh] flex justify-center items-center flex-col">
      <Toaster />
      <h1 className="text-3xl">My Ratings Component</h1>
      <MultiRatingsComponent
        ratingsData={ratings}
        updateRating={updateRating}
        randomNames={randomNames}>
        <MultiRatingsComponent.RatingsContainer />
        <MultiRatingsComponent.Comment />
        <MultiRatingsComponent.UserFeedback />
      </MultiRatingsComponent>
    </main>
  );
}

And…Presto!

Testing the rating component with CC pattern, label cues and comments

Your rating component is completed, with the added functionality of comments. ⭐
How would you rate the ride throughout this build? 5 stars? 😉

Additional Information

Here are links to all the resources you may need from this article.

• Starter files
• Regular React Pattern
• Compound Component Pattern

And just for fun...

Since we built a rating component centered around movies, here are 5 movies I consider to be worth 5 stars in no particular order.

• The Grand Budapest Hotel (Comedy/Crime)
• The Magnificent Seven (Western/Action)
• Django Unchained (Western/Action)
• Ford vs Ferrari (Sports/Action)
• Inception (Action/Sci-fi)

Conclusion

In conclusion, crafting a movie-themed rating component using the Compound Component pattern in React is a surefire blockbuster for your projects. This approach enables you to create a sleek, modular, and maintainable codebase.

Mastering this technique ensures your rating system is both functional and ready for the future. Lights, camera, action – may your coding journey dazzle with five-star reviews and standing ovations!

Like my articles?

Feel free to buy me a coffee here, to keep my brain chugging and provide more articles like this.

Coffee Tom

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

• Twitter / X: @jajadavid8
• LinkedIn: David Jaja
• Email: Jajadavidjid@gmail.com

But here's the exciting part: biophilic design offers a cool solution. Usually, it's all about bringing nature into buildings, but now nature is branching out into web design as well.

In this article, we'll explore why we feel disconnected from nature and how biophilic design can help fix that, even in the digital world.

What is Biophilic Design?

Well, it's all about bringing nature back into our lives, whether it's at home, in the office, or wherever we hang out.

It's not just about making things look pretty – it's about making us feel good by reconnecting us with the great outdoors.

History of Biophilic Design

Biophilic design, stemming from the Greek words "bios" (life) and "philia" (love), is all about our natural connection to the world around us. It has its roots in architecture and building design, where people realised that bringing elements of nature into our spaces makes us feel better.

This design approach mimics nature's patterns and includes views of trees and natural light. It's a way of making our homes and workplaces feel more like the outdoors.

Biophilic Design in Architecture

As cities grow and technology becomes more important, we spend less time in nature. That's why biophilic design is so important. It's not just for buildings – it's also being used in things like website design to remind us of our love for nature.

So, whether it's in a physical space or online, biophilic design helps us remember how much we need nature for our happiness and well-being.

The Problem: Understanding Our Distance from Nature

How Screens Shape Our Lives

You know how it is these days – screens are everywhere, right? From our smartphones and tablets to laptops and TVs, they've become like companions, keeping us hooked for hours.

Sometimes it feels like we're living in a whole different world, one that's all digital and disconnected from nature.

Ever found yourself mindlessly scrolling through social media or binge-watching shows, losing track of time? It's what some call "zombie-scrolling" – we've all been there. 😌

Endless Scrolling

Lost in the Digital World: Where's Nature?

We're all guilty of getting sucked into the digital vortex. Whether it's getting lost in Netflix marathons, being glued to our work screens or endless scrolling through Insta… (Let’s be serious, it’s Twitter 😂), our attention rarely strays from the virtual realm. And the more we dive into digital content, the further we drift from the great outdoors.

It's like we're building this invisible wall between ourselves and nature without even realizing it.

Tweet it

We're Missing Out on Nature's Charms

With our lives becoming more and more centered around screens, outdoor adventures seem to be a thing of the past. Many of us spend our days cooped up indoors, surrounded by artificial lights and controlled temperatures. It's like we've forgotten what it feels like actually to touch grass or feel the sun on our faces. There's just not much incentive to step outside and soak in the beauty of nature anymore.

But We're Often Unaware of the Disconnect

Here's the thing: Many of us don't even realize how far we've drifted from nature. We're so caught up in the digital world that we hardly think about how it's affecting us and our connection to nature. It's like this subtle but important change that sneaks up on us until we pause and reflect on it.

And here's the kicker: this disconnection isn't just about not enjoying nature's beauty. It's also messing with our health.

Research shows that spending too much time indoors and not enough time outdoors can cause issues like obesity, depression, and not getting enough vitamin D. Lack of physical activity is a big deal, contributing to millions of deaths every year worldwide.

So, while binge-watching shows or scrolling through social media all day might seem harmless, it's impacting our health and well-being in a big way.

The Harmful Effects of a Disconnect from Nature

As we've seen, our increasing immersion in the digital world comes with consequences beyond just missing out on the joys of nature. This disconnect has profound effects on our health and well-being, impacting us in ways we might not even realize.

• Mental Health Struggles: Spending excessive time indoors and away from nature has been linked to higher rates of depression, anxiety, and stress. Without the calming influence of natural environments, our mental health can suffer, leaving us feeling more isolated and disconnected from the world around us.
• Physical Health Risks: Being too sedentary, especially with too much screen time, poses serious risks to our physical health. Conditions like obesity, cardiovascular disease, and diabetes are just some of the issues linked to not being active enough and spending too much time indoors. Our bodies thrive on movement and natural light, and depriving them of these essentials can take a toll on our health.
• Vitamin D Deficiency: Not getting enough sunlight indoors means missing out on vital nutrients like vitamin D, essential for bone health, immune function, and mood regulation. Without sufficient sunlight exposure, we become more prone to deficiencies that can affect our overall health in various ways.
• Disconnect from Reality: As we go deeper into the digital space, we risk losing touch with reality. This gradual disconnection from the natural world means we miss out on the sights, sounds, and sensations that keep us grounded. Ultimately, this disconnect can leave us feeling adrift and disconnected from both ourselves and the world around us.

Biophilic Elements in Web Design

Let's talk bout how you can incorporate bits of nature into your website design to help bring the outdoors in and reconnect with the natural world.

Natural Forms and Patterns

Integrating organic shapes, textures, and patterns reminiscent of nature is key. In web design, this means crafting interfaces that mirror the fluidity and diversity of the natural world.

For example, the UI below utilizes a hanging flower pattern to represent a flower shop, embracing the beauty of nature in its design (reference).

Floral Website

Natural Materials and Textures

Incorporating natural materials and textures is crucial for creating a warm and inviting digital environment. Just like in physical spaces, using elements that mimic natural materials can evoke a sense of comfort and connection.

For instance, the UI below shapes the landing page of a woodworking company, resembling components of a furniture piece. This use of imagery mimics the texture and warmth of wood, enhancing the user experience and bringing the outdoors to your screen (reference).

Woodworking Website

Natural Light and Views

Natural light is crucial in biophilic design for creating visually appealing spaces that promote well-being. Similarly, in web design, incorporating light and outdoor views enhances the user experience, fostering a sense of openness and connection to nature.

Maximizing natural light in web layouts involves creating airy designs with ample white space to let light in. Incorporating images or animations of outdoor scenes, like lush landscapes or serene water bodies, deepens the connection to nature, infusing websites with tranquillity and wonder.

For example, the UI below uses real images of nature to brighten up the webpage, harnessing natural light to enhance the user experience (reference).

Landscape Website

Biophilic Colors

Colours play a significant role in shaping the mood and user experience. Incorporating colours inspired by nature can cultivate a soothing atmosphere, reinforcing the connection between users and the natural world.

Choosing nature-inspired colours such as earth tones, greens, and blues evokes feelings of tranquillity, vitality, and serenity. These hues, commonly found in natural landscapes, can evoke positive emotions in users.

For instance, the UI below utilizes shades of green to convey a sense of freshness and health associated with the company's food offerings. This use of colour triggers positive associations with nature, enhancing the overall user experience (reference).

Vegetation Website

Living Systems and Biomimicry

Biomimicry, mimicking natural processes in design, provides rich inspiration for creating efficient, sustainable, and user-friendly solutions. This involves drawing from natural ecosystems to guide website functionality and navigation.

Emulating natural systems in website design can lead to intuitive user experiences that mirror the adaptability of the natural world. By studying living systems, designers can apply these principles to digital interfaces, enhancing usability and engagement.

For example, the UI below incorporates elements of human anatomy to communicate the company's purpose effectively. This biomimetic approach helps users intuitively understand the company's offerings, enhancing the overall user experience (reference).

Biomimicry Website

Benefits of Biophilic Web Design

Biophilic web design offers a multitude of benefits that extend beyond mere aesthetics.

• Enhanced User Experience: Biophilic elements have the power to evoke positive emotions and create a more engaging user experience. Natural forms, colors, and textures can resonate with users on a subconscious level, fostering a sense of comfort, connection, and delight as they interact with the website.
• Improved Well-being: Exposure to nature, even in digital form, has been shown to reduce stress and enhance cognitive function. By immersing users in environments reminiscent of the natural world, biophilic web design can create digital spaces that promote relaxation, focus, and overall well-being.
• Differentiation and Brand Identity: Incorporating biophilic design can set a website apart from competitors and communicate values of sustainability and connection to the natural world. By aligning with themes of environmental stewardship and holistic living, brands can differentiate themselves and forge deeper connections with environmentally conscious consumers.
• Increased User Engagement: When websites offer a visually appealing and calming experience, users are more inclined to stick around. By crafting digital environments that mirror the tranquillity and beauty of nature, designers can captivate users' attention, prompting them to explore, interact, and come back for more.

Minion Kiss

Conclusion

As we wrap up our exploration of biophilic design in web design, remember this: while screens can be captivating, don't forget to reconnect with nature. Biophilic design isn't just about aesthetics – it's about infusing digital spaces with the serenity of the outdoors.

And hey, here's a friendly question: Have you touched some grass today 😒? It might be just the digital detox your soul needs. Step away from the screen and immerse yourself in the beauty of the natural world. Your mind, body, and spirit will thank you.

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

• Twitter / X: @jajadavid8
• LinkedIn: David Jaja
• Email: Jajadavidjid@gmail.com

You probably encountered one today, whether it was selecting a category on your favourite online store or choosing your birthdate on a registration form.

But what if I told you that there's a secret ingredient that can elevate your dropdowns from mundane to magnificent?

Join me as I dissect the mysteries of the compound component pattern and harness its abilities to build a dynamic dropdown component.

Prerequisites

• Fundamentals of HTML, CSS and Tailwind CSS
• Fundamentals of React and React Hooks.

What We'll Cover:

1. Understanding Dropdown Components
2. Understanding Compound Components
3. How to Build the Dropdown Component
   – Regular Functional React Method
   – The Compound Component Pattern Method
4. Comparison between the Regular and the Compound Component Method
5. Conclusion

Understanding Dropdown Components

Dropdown components play a pivotal role in user interface design, functioning as interactive menus that empower users to make selections from a list of options. Typically, they comprise of a clickable area that, upon activation, unveils a roster of choices for the user to make a selection from.

The operation of a dropdown component is straightforward: when a user engages with it—often through clicking or tapping—the dropdown expands, showing the available options.

Subsequently, the user can opt for one of these choices, which is then either shown within the dropdown itself or utilized to update a related field or element in the interface.

Dropdown components provide a clean and efficient method to present a variety of choices to users, rendering them well-suited for scenarios where multiple options need to be accessible while maintaining a tidy interface.

Dropdowns also serve purposes such as:

• Navigation Aid: Acting as navigational aids, dropdowns help users move through websites by providing menus to jump to different sections or pages.
• Form Inputs: Simplifying data entry, dropdowns present users with predefined options for selection, such as choosing a country, date of birth, or preferred language during account registration.
• Filters: In e-commerce platforms, dropdowns enable shoppers to refine their search results by selecting options like product categories, price ranges, or brands.
• Menu Selectors: Commonly used on restaurant websites, dropdowns display menus or allow users to choose a cuisine type, facilitating easy exploration and selection of dining options.
• Data Presentation: Dropdowns can organize and present data effectively, allowing users to filter information by criteria such as date range, geographic region, or product category in dashboards or analytics tools.

An example of dropdown components can be seen here:

Showing Dropdown Demo

Or on Semantic UI’s page.

Understanding Compound Components

The compound component pattern is like building with LEGO blocks: you assemble smaller pieces to create something bigger and more complex. In React, it's a clever way of designing components from several smaller parts that work together seamlessly.

Imagine that you're building a dropdown menu. Instead of creating one monolithic component that handles everything, you break it down into smaller, reusable pieces. You might have one component for the dropdown button, another for the list of options, and yet another for handling the state and interaction logic.

Compound Component Illustration

Here's where it gets interesting: these smaller components communicate through a shared context. Context is like a messenger that carries information from one component to another without needing to pass it down through every level of the component tree.

It's a powerful tool that simplifies the process of sharing data between components, especially when they're deeply nested.

Now, why is this pattern so beneficial?

• First off, it improves readability. By breaking down a complex component into smaller, more focused pieces, the code becomes easier to understand and maintain. Each component has a clear responsibility, making it easier to debug and update.
• Secondly, compound components enhance maintainability. Since each piece of the component handles a specific task, making changes or adding new features becomes much simpler. You can modify one part of the component without affecting the others, reducing the risk of introducing bugs.
• Finally, compound components provide great flexibility. You can combine different parts to make special versions of the component without having to rewrite any code. This makes it easier to adjust the component for different purposes and design requirements.

So, while the idea of using context to build UI components may seem unusual at first, it's a clever way of creating dynamic and reusable components that empower developers to build exceptional user experiences.

In the next section, we'll dive deeper into how context is used to bring compound components to life.

How to Build the Dropdown Component

I've prepared a GitHub repository with starter files to speed things up. Simply clone this repo and install the dependencies.

In this section, we'll build a dropdown component using regular functional React, then compare it with the CC pattern to grasp the difference fully. PS: you'd like the compound component pattern. 😁

Oh Fo sho Snoop Dogg gif

Regular Functional React Method

We'll start by creating the basic structure of our dropdown component. This will involve setting up the main dropdown container, the button to trigger the dropdown, and the list of options.

const Dropdown = () => {
  return (
    <div>
      <label className="mt-4">Assign user(s) to as task:</label>

      <button className="  px-4 w-full py-2 flex items-center justify-between  rounded border border-[#828FA340] hover:border-primary cursor-pointer relative ">
        <span className="block">
          <FiChevronDown color="#635FC7" size={24} />
        </span>
      </button>
    </div>
  );
};

Which gives:

Dropdown button rendered

Then pass in the users array into the dropdown to create a list of users.

const Dropdown = ({ usersArray }) => {
  return (
    <div>
      <label className="mt-4">Assign user(s) to as task:</label>

      <button className="  px-4 w-full py-2 flex items-center justify-between  rounded border border-[#828FA340] hover:border-primary cursor-pointer relative ">
        <span className="block">
          <FiChevronDown color="#635FC7" size={24} />
        </span>
        {
          <div className="absolute bottom-full translate-x-9  left-full translate-y-full rounded bg-[#20212c] w-max">
            <ul className="flex flex-col p-2">
              {usersArray.map((user) => (
                <li
                  key={user.id}
                  className={`flex items-center gap-2 p-4 hover:bg-[#2b2c37] rounded transition-all duration-200 `}>
                  <img
                    className="w-6 h-6 "
                    src={user.imgUrl}
                    alt={`${user.name} image`}
                  />
                  <span>{user.name}</span>
                </li>
              ))}
            </ul>
          </div>
        }
      </button>
    </div>
  );
};

Which gives:

Dropdown list rendered

At the moment, your dropdown list is showing by default. To add the toggle behavior, create a state for its visibility.

 const [isDropdownOpen, setIsDropdownOpen] = useState(false);

Then pass down both as props to the Dropdown component.

<Dropdown
 usersArray={usersArray}
 isDropdownOpen={isDropdownOpen}
 setIsDropdownOpen={setIsDropdownOpen}
 />

Before you see the result, attach a toggle function that changes the dropdown state to true to the dropdown button.

const toggleDropdown = () => {
    setIsDropdownOpen(true);
};

Your dropdown component should now look like this:

const Dropdown = ({ usersArray, setIsDropdownOpen, isDropdownOpen }) => {
  const toggleDropdown = () => {
    setIsDropdownOpen(true);
  };

  return (
    <div>
      <label className="mt-4">Assign user(s) to as task:</label>

      <button
        className="  px-4 w-full py-2 flex items-center justify-between  rounded border border-[#828FA340] hover:border-primary cursor-pointer relative "
        // Function to show the dropdown on click
        onClick={toggleDropdown}>
        <span className="block">
          <FiChevronDown color="#635FC7" size={24} />
        </span>
      // Conditionally rendering your dropdown list
        {isDropdownOpen && (
          <div className="absolute bottom-full translate-x-9  left-full translate-y-full rounded bg-[#20212c] w-max">
            <ul className="flex flex-col p-2">
              {usersArray.map((user) => (
                <li
                  key={user.id}
                  className={`flex items-center gap-2 p-4 hover:bg-[#2b2c37] rounded transition-all duration-200 `}>
                  <img
                    className="w-6 h-6 "
                    src={user.imgUrl}
                    alt={`${user.name} image`}
                  />
                  <span>{user.name}</span>
                </li>
              ))}
            </ul>
          </div>
        )}
      </button>
    </div>
  );
};

Your dropdown now behaves like so:

Dropdown with list conditionally rendering

I know you’ve noticed your dropdown only opens, but doesn’t close. Don’t worry, we’d fix that later in a much cleaner way. 😉

Trust the process

Next up, let’s create a way to assign users to the task. Start by creating a state to store the assigned users in the App component.

 const [assignedList, setAssignedList] = useState([]);

Then pass in the values as props to the Dropdown component.

<Dropdown
  usersArray={usersArray}
  isDropdownOpen={isDropdownOpen}
  setIsDropdownOpen={setIsDropdownOpen}
  assignedList={assignedList}
  setAssignedList={setAssignedList}
/>

To assign users to the task, create a handler function which first checks if the user you're trying to add is already in the array, adds them if they're not, and removes them if they are.

  function handleAssign(user) {
    setAssignedList((prevList) => {
      // Check if the user already exists in the list
      if (prevList.includes(user)) {
        // If user exists, remove it from the list
        const updatedList = prevList.filter((item) => item !== user);
        return updatedList;
      } else {
        // If user doesn't exist, add it to the list
        return [...prevList, user];
      }
    });
  }

To confirm this function works, use the assignedList array to add a check icon to every assigned user.

<ul className="flex flex-col p-2">
  {usersArray.map((user) => (
    <li
      key={user.id}
      className={`flex items-center gap-2 p-4 hover:bg-[#2b2c37] rounded transition-all duration-200 `}
      onClick={() => handleAssign(user)}
    >
      {assignedList.includes(user) && <FiCheck />}

      <img
        className="w-6 h-6 "
        src={user.imgUrl}
        alt={`${user.name} image`}
      />
      <span>{user.name}</span>
    </li>
  ))}
</ul>

With this change, the dropdown should assign and unassign users on the click of each user.

Assigning and unassigning users to the task

To improve the UI, let’s create a component which shows all the assigned users.

Create an AssignedList component and pass in its respective states.

 <AssignedList
   assignedList={assignedList}
   setAssignedList={setAssignedList}
  />

Then use the assigned array to create some JSX.

function AssignedList({ assignedList, setAssignedList }) {
  return (
    <div className="mt-4 p-2 shadow-sm bg-[#828fa318] rounded">
      <h2 className="px-2 my-3 font-bold">Assigned list:</h2>
      <div className="flex flex-wrap gap-4 ">
        {assignedList?.map((user, index) => (
          <div
            key={user.id}
            className="flex items-center gap-1 w-[47.5%] p-2 hover:bg-[#20212c] rounded transition-all duration-200">
            <span>{index + 1}.</span>
            <img
              className="w-6 h-6 "
              src={user.imgUrl}
              alt={`${user.name} image`}
            />

            <span>{user.name}</span>
            <span className="ml-auto cursor-pointer p-1 hover:bg-[#2b2c37] rounded-full">
              <FaXmark />
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

Testing out your component now yields:

Displaying assigned users using the AssignedList component

One of the final touches would be to use the x icon to remove a user from the assignment.

This can be done using the setAssigned function to filter out the user based on their id.

function handleRemove(id) {
    setAssignedList((assignedList) =>
      assignedList.filter((user) => user.id !== id)
    );
  }

Then pass in the user id from the loop.

function AssignedList({ assignedList, setAssignedList }) {
  function handleRemove(id) {
    setAssignedList((assignedList) =>
      assignedList.filter((user) => user.id !== id)
    );
  }
  return (
    <div className="mt-4 p-2 shadow-sm bg-[#828fa318] rounded">
      <h2 className="px-2 my-3 font-bold">Assigned list:</h2>
      <div className="flex flex-wrap gap-4 ">
        {assignedList?.map((user, index) => (
          <div
            key={user.id}
            className="flex items-center gap-1 w-[47.5%] p-2 hover:bg-[#20212c] rounded transition-all duration-200"
            onClick={() => handleRemove(user.id)}>
            <span>{index + 1}.</span>
            <img
              className="w-6 h-6 "
              src={user.imgUrl}
              alt={`${user.name} image`}
            />

            <span>{user.name}</span>
            <span className="ml-auto cursor-pointer p-1 hover:bg-[#2b2c37] rounded-full">
              <FaXmark />
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

This gives:

Removing users from assignment using the AssignedList component

Another final touch would be to close the dropdown list at some user interaction.

To begin, I like using a reusable hook for this, which takes in a reference element and a function to fire when any area outside my target element is clicked.

import { useEffect } from "react";

const useClickOutside = (ref, handler) => {
  // console.log(handler, ref);
  useEffect(() => {
    const listener = (event) => {
      // Do nothing if clicking ref's element or descendent elements
      if (!ref.current || ref.current.contains(event.target)) {
        return;
      }

      handler(event);
    };

    document.addEventListener("mousedown", listener);
    document.addEventListener("touchstart", listener);

    return () => {
      document.removeEventListener("mousedown", listener);
      document.removeEventListener("touchstart", listener);
    };
  }, [ref, handler]);
};

export default useClickOutside;

Then in our App component, create a ref using the useRef hook to select an element.

  const dropdownContainerRef = useRef(null);

Then assign it to your preferred element.

export default function App() {
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);

  const [assignedList, setAssignedList] = useState([]);

  const dropdownContainerRef = useRef(null);


  return (
    <div className="bg-[#2b2c37] h-[100dvh] text-white flex  p-20 gap-4 items-center flex-col">
      <div className=" w-[400px] " ref={dropdownContainerRef}>
        <h1 className="text-2xl ">Regular Functional React Pattern</h1>
        <Dropdown
          usersArray={usersArray}
          isDropdownOpen={isDropdownOpen}
          setIsDropdownOpen={setIsDropdownOpen}
          assignedList={assignedList}
          setAssignedList={setAssignedList}
        />
        <AssignedList
          assignedList={assignedList}
          setAssignedList={setAssignedList}
        />
      </div>
    </div>
  );
}

Finally, import your hook and pass in the reference element and the function handler function for closing the dropdown.

 useClickOutside(dropdownContainerRef, () => {
    setIsDropdownOpen(false);
  });

Testing your component now gives:

Closing the dropdown component with outside clicks

Or using a predefined button in the dropdown.

<button
  className="px-4 w-full py-2 flex items-center justify-between rounded border border-[#828FA340] hover:border-primary cursor-pointer relative"
  onClick={toggleDropdown}
>
  <span className="block">
    <FiChevronDown color="#635FC7" size={24} />
  </span>
  {isDropdownOpen && (
    <div className="absolute bottom-full translate-x-9 left-full translate-y-full rounded bg-[#20212c] w-max">
      {/* Close button */}
      <div
        className="absolute top-0 right-0 flex items-center justify-center -translate-y-full gap-2 bg-[#C0392B] px-2 py-1 rounded-t"
        onClick={(e) => {
          e.stopPropagation();
          setIsDropdownOpen(false);
          console.log(isDropdownOpen);
        }}
      >
        <span>Close</span>
        <span>
          <FaXmark size={20} />
        </span>
      </div>
      <ul className="flex flex-col p-2">
        {usersArray.map((user) => (
          <li
            key={user.id}
            className={`flex items-center gap-2 p-4 hover:bg-[#2b2c37] rounded transition-all duration-200`}
            onClick={() => handleAssign(user)}
          >
            {assignedList.includes(user) && <FiCheck />}
            <img
              className="w-6 h-6"
              src={user.imgUrl}
              alt={`${user.name} image`}
            />
            <span>{user.name}</span>
          </li>
        ))}
      </ul>
    </div>
  )}
</button>

Closing the dropdown with the designated button

The final change is an opinionated one as I’d rather show something else if there aren’t any users currently assigned to the task.

{assignedList.length === 0 ? (
  <p className="mt-4 p-2 shadow-sm bg-[#828fa318] rounded">
    No users assigned to the task yet.
  </p>
) : (
  <AssignedList
    assignedList={assignedList}
    setAssignedList={setAssignedList}
  />
)}

This brings the UI to:

Showing a default text when no users are assigned

The Compound Component Pattern Method

Now, for the main event. Start by creating a context which wraps the entire component.

const UserAssignContext = createContext();

Then we gather all the necessary data and functions that our dropdown and its components will need. This includes things like the list of assigned users, a function to update that list, and whether the dropdown is currently open or not.

After which, you provide those values to all its children component.

const UserAssignDropdown = ({
  children,
  assignedList,
  setAssignedList,
  users,
}) => {
  const UserAssignDropdownRef = useRef(null);
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);

  return (
    <UserAssignContext.Provider
      value={{
        assignedList,
        users,
        UserAssignDropdownRef,
        isDropdownOpen,
        setIsDropdownOpen,
        setAssignedList,
      }}>
      <div ref={UserAssignDropdownRef}>{children}</div>
    </UserAssignContext.Provider>
  );
};

With our context set up, it's time to craft the individual components that will make up our dropdown. Each component will interact with the context to access and manipulate the necessary data and functions.

Start by copying each style from the components we just built.

The Header Component

This component remains the same.

const Header = () => {
  return <label className="mt-4 mb-2 text-sm">Assign task to:</label>;
};

The Close Component

This component obtains the function for toggling the dropdown from the context.

const Close = () => {
  const { setIsDropdownOpen } = useContext(UserAssignContext);
  return (
    <div
      className="absolute top-0 right-0 flex items-center justify-center -translate-y-full gap-2 bg-[#C0392B] px-2 py-1 rounded-t"
      onClick={(e) => {
        e.stopPropagation();
        setIsDropdownOpen(false);
      }}>
      <span>Close</span>
      <span>
        <FaXmark size={20} />
      </span>
    </div>
  );
};

The Assigned List Component

This component displays the list of assigned users, as well as removing users from the list.

const AssignedList = () => {
  const { assignedList, setAssignedList } = useContext(UserAssignContext);

  function handleRemove(id) {
    setAssignedList((assignedList) =>
      assignedList.filter((user) => user.id !== id)
    );
  }

  if (assignedList.length === 0)
    return (
      <p className="mt-4 p-2 shadow-sm bg-[#828fa318] rounded">
        No users assigned to the task yet.
      </p>
    );

  return (
    <div className="mt-4 p-2 shadow-sm bg-[#828fa318] rounded">
      <h2 className="px-2 my-3 font-bold">Assigned list:</h2>
      <div className="flex flex-wrap gap-4 ">
        {assignedList?.map((user, index) => (
          <div
            key={user.id}
            className="flex items-center gap-1 w-[47.5%] p-2 hover:bg-[#20212c] rounded transition-all duration-200"
            onClick={() => handleRemove(user.id)}>
            <span>{index + 1}.</span>
            <img
              className="w-6 h-6 "
              src={user.imgUrl}
              alt={`${user.name} image`}
            />

            <span>{user.name}</span>
            <span className="ml-auto cursor-pointer p-1 hover:bg-[#2b2c37] rounded-full">
              <FaXmark />
            </span>
          </div>
        ))}
      </div>
    </div>
  );
};

The Item Component

This component represents each user and the functionality of adding and removing users from the assigned list.

const Item = ({ user }) => {
  const { assignedList, setAssignedList } = useContext(UserAssignContext);

  function handleAssign(user) {
    setAssignedList((prevList) => {
      // Check if the user already exists in the list
      if (prevList.includes(user)) {
        // If user exists, remove it from the list
        const updatedList = prevList.filter((item) => item !== user);
        return updatedList;
      } else {
        // If user doesn't exist, add it to the list
        return [...prevList, user];
      }
    });
  }

  return (
    <li
      key={user.id}
      className={`flex items-center gap-2 p-4 hover:bg-[#2b2c37] rounded transition-all duration-200 `}
      onClick={() => handleAssign(user)}>
      {assignedList.includes(user) && <FiCheck />}

      <img className="w-6 h-6 " src={user.imgUrl} alt={`${user.name} image`} />
      <span>{user.name}</span>
    </li>
  );
};

The Button Component

This component controls displaying the List component (floating dropdown).

const Button = () => {
  const { setIsDropdownOpen } = useContext(UserAssignContext);
  return (
    <button
      className="  px-4 py-2 flex items-center justify-between w-full rounded border border-[#828FA340] hover:border-primary cursor-pointer relative "
      onClick={() => setIsDropdownOpen(true)}>
      <span className="block">
        <FiChevronDown color="#635FC7" size={24} />
      </span>

      <UserAssignDropdown.List />
    </button>
  );
};

To combine this component into a singular compound component (compound component), you assign each component to the parent, like so;

UserAssignDropdown.List = ListContainer;
UserAssignDropdown.Item = Item;
UserAssignDropdown.Header = Header;
UserAssignDropdown.Button = Button;
UserAssignDropdown.AssignedList = AssignedList;
UserAssignDropdown.Close = Close;

Next, import your compound component in your App component as a wrapper component and pass in the appropriate states.

export default function App() {
  const [assignedList, setAssignedList] = useState([]);

  return (
    <div className="bg-[#2b2c37] h-[100dvh] text-white flex  p-20 gap-4 items-center flex-col">
      <div className=" w-[400px] ">
        <h1 className="text-2xl ">Compound Component Pattern</h1>
        <UserAssignDropdown
          assignedList={assignedList}
          setAssignedList={setAssignedList}
          users={usersArray}></UserAssignDropdown>
      </div>
    </div>
  );
}

Then in the wrapper, render the appropriate children.

export default function App() {
  const [assignedList, setAssignedList] = useState([]);

  return (
    <div className="bg-[#2b2c37] h-[100dvh] text-white flex  p-20 gap-4 items-center flex-col">
      <div className=" w-[400px] ">
        <h1 className="text-2xl ">Compound Component Pattern</h1>
        <UserAssignDropdown
          assignedList={assignedList}
          setAssignedList={setAssignedList}
          users={usersArray}>
          <UserAssignDropdown.Header />
          <UserAssignDropdown.Button />
          <UserAssignDropdown.AssignedList />
        </UserAssignDropdown>
      </div>
    </div>
  );
}

Finally, use the custom hook we created earlier to close the dropdown when you click outside the component.

const UserAssignContext = createContext();
const UserAssignDropdown = ({
  children,
  assignedList,
  setAssignedList,
  users,
}) => {
  const UserAssignDropdownRef = useRef(null);
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);

  useClickOutside(UserAssignDropdownRef, () => {
    setIsDropdownOpen(false);
  });

  return (
    <UserAssignContext.Provider
      value={{
        assignedList,
        users,
        UserAssignDropdownRef,
        isDropdownOpen,
        setIsDropdownOpen,
        setAssignedList,
      }}>
      <div ref={UserAssignDropdownRef}>{children}</div>
    </UserAssignContext.Provider>
  );
};

And with that, your component works the same!

Replicating the same functionality with the compound component pattern

But why stop here?

With this pattern, changing the look of the component is as easy as changing the order in which you render them in their parent. For instance, if you wanted the button first, you simply change the order in the parent wrapper.

<UserAssignDropdown
  assignedList={assignedList}
  setAssignedList={setAssignedList}
  users={usersArray}
>
  <UserAssignDropdown.Button />
  <UserAssignDropdown.Header />
  <UserAssignDropdown.AssignedList />
</UserAssignDropdown>

And the UI responds accordingly.

Order of rendering in compound component changed

This component is also flexible enough to change the layout of elements via props.

Just by passing style props via a parent:

<UserAssignDropdown
  assignedList={assignedList}
  setAssignedList={setAssignedList}
  users={usersArray}
>
  <UserAssignDropdown.Header />
  <UserAssignDropdown.Button
    listStyles={"!-left-5 !-translate-x-full bg-[#605e80] text-white border"}
  />
  <UserAssignDropdown.AssignedList />
</UserAssignDropdown>

And receiving those props in the child:

const Button = ({ listStyles }) => {
  const { setIsDropdownOpen, UserAssignDropdownRef } =
    useContext(UserAssignContext);
  return (
    <button
      className="  px-4 py-2 flex items-center justify-between w-full rounded border border-[#828FA340] hover:border-primary cursor-pointer relative "
      ref={UserAssignDropdownRef}
      onClick={() => setIsDropdownOpen(true)}>
      <span className="block">
        <FiChevronDown color="#635FC7" size={24} />
      </span>
      <UserAssignDropdown.List listStyles={listStyles} />
    </button>
  );
};

const ListContainer = ({ listStyles }) => {
  const { users, isDropdownOpen } = useContext(UserAssignContext);

  return (
    isDropdownOpen && (
      <ul
        className={`absolute bottom-full translate-x-9  left-full translate-y-full rounded bg-[#20212c] w-max ${listStyles}`}>
        <UserAssignDropdown.Close />
        <div className="flex flex-col p-2">
          {users?.map((user, index) => (
            <UserAssignDropdown.Item key={index} user={user} />
          ))}
        </div>
      </ul>
    )
  );
};

You can easily change the look of the component.

Using props to customize the compound component

Comparison between the Regular and the Compound Component method

Alright, let's take a step back and compare the two approaches we've just explored.

Simplicity and Organization

• Regular Method: Picture it like baking a cake all in one big bowl. With the regular method, we can create a single component responsible for everything in the dropdown – the button, the list, and all the ingredients. It's like having a big recipe card with all the steps jumbled together. It gets the job done, but it can be a bit messy and hard to follow, especially when you're trying to tweak just one part of the recipe.
• Compound Component Method: Now imagine we've got different bowls for each ingredient, a separate one for flour, another for sugar, and so on. That's the compound component pattern. Each part of the dropdown has its own space to shine. It's like organizing your kitchen – everything has its place. This makes it easier to understand and modify. Need to change the flour? You know just where to look.

Flexibility and Customization

• Regular Method: With our single-bowl approach, making changes to specific parts of the dropdown can be a bit like trying to swap out ingredients in that big cake mix. Sure, you can do it, but it's not always easy. Want a different flavor of cake? You might need to dig through the whole bowl to find where to add it.
• Compound Component Method: With the compound component pattern, it's like having separate containers for each flavor. Need to add chocolate chips? Just grab the chocolate container and sprinkle away. Each component has its job, making it simpler to customize. Want to change the color of the button? No problem, it's right there in its container.

Reuse and Maintenance

• Regular Method: When your recipe is all mixed up in one bowl, it can be hard to reuse parts of it for another dish. Plus, as your kitchen gets busier, it's easy for things to get messy and hard to keep track of. You might find yourself rewriting the recipe every time you want to make something new.
• Compound Component Method: With the compound component pattern, it's like having a set of reusable tools in your kitchen. Need to make a different kind of cake? Just grab the tools you need and get baking. Each component is like a specialized gadget – easy to reuse and maintain. And when your kitchen is organized, it's a breeze to whip up something new.

Additional Information

Here are links to all the resources you may need from this article.

• Starter files
• Regular Function Pattern
• Compound Component Pattern

Conclusion

In the end, both methods have their place in the kitchen – er, I mean, in your code. The regular method is like your trusty old mixing bowl – reliable and familiar, but maybe not the most efficient for every recipe.

The compound component Pattern is like a well-organized kitchen, with everything in its place and ready to go. It might take a bit more setup, but it can make your life a whole lot easier in the long run. So, depending on what you're cooking up, choose the method that suits your taste– and happy coding! 🍰🎨

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

• Twitter / X: @jajadavid8
• LinkedIn: David Jaja
• Email: Jajadavidjid@gmail.com

Similarly in web applications, marquees inject a lively visual sense by effortlessly grabbing attention and infusing your online projects with dynamism.

Join me as we explore how to build an engaging marquee component in React.
This step-by-step guide targets everyone regardless of skill level, we aim to make your experience with React both enjoyable and useful.

What We'll Cover:

1. Understanding Marquee Components
2. Benefits of Marquees
3. Planning and Designing the Marquee Component
4. How to Implement the Marquee Component
5. How to Enhance the Marquee Component
6. Best Practices and Tips for Marquee Component Development
7. Conclusion

Prerequisites

• Fundamentals of HTML and CSS
• Fundamentals of ES6 JavaScript and React

Understanding Marquee Components

A marquee represents a continuous section of text or visual content (such as pictures) that scrolls automatically in a horizontal direction.

Although the official HTML Marquee element is obsolete and its use is heavily discouraged, the concept of scrolling, endless elements to add zest to a webpage is still very much in use, and can be found on numerous modern websites.

This effect is realized through CSS animations, offering a more efficient, fluid, and lightweight animation outcome.

A visual example of a marquee component from Webflow is shown below.

Webflow Example

Benefits of Marquees

They have a bunch of usefulness such as:

• Attention-grabbing: Marquees are excellent for drawing attention to specific content on a webpage. Whether it's a special offer, announcement, or featured content, a moving marquee naturally catches the eye.
• Visual Appeal: Adding a touch of motion to your website enhances its visual appeal. Marquees can bring life to a page, making it more dynamic and engaging for users.
• Highlighting Important Information: When you want to emphasize critical information like breaking news, upcoming events, or urgent messages, a marquee is an effective way to ensure that users don't miss out.
• Event Promotion: They are particularly useful for promoting events or time-sensitive activities. Their scrolling nature allows you to display event details, dates, and highlights space-efficiently.
• Ticker-Style Updates: For displaying real-time updates, such as stock prices, news headlines, or social media feeds, marquees provide a ticker-style format that keeps information continuously flowing for users.
• Interactive Banners: They can serve as interactive banners, allowing users to click on specific items as they scroll by. This can be a creative way to lead users to different sections or pages of your website.
• Dynamic Product Showcases: E-commerce websites can benefit from marquees by showcasing new products or featured items in a visually engaging way, encouraging users to explore the offerings.
• Call-to-Action Emphasis: If you have specific call-to-action messages, using them can give prominence and ensure that they don't go unnoticed.
• Breaking Monotony: In long pages or static content, a well-designed marquee can break the monotony and add an element of surprise, making the user experience more interesting.
• Versatility: They are versatile and can be customized to suit various styles and themes, making them a flexible tool for web designers seeking to create unique and memorable user interfaces.

Planning and Designing the Marquee Component

Before you start coding, it's important to plan and design your component and consider factors such as:

• Define Content: Clearly outline the content you want to display in the component. This could include text, images, or a combination of both.
• Scroll Speed: Determine the desired scrolling speed to be used. Consider the optimal pace for readability and visual appeal.
• Visual Design: Sketch or visualize how you want it to look. Decide on colors, fonts, and any additional styling to align with your overall design scheme.
• Behavior at Scroll End: Consider its behavior when it reaches the end of its scroll position. Decide whether it should loop continuously, bounce back and forth, or have a specific end-state.
• User Interaction: If applicable, plan for any user interaction. This could include pausing on hover or allowing users to click on items within the marquee.
• Responsive Design: Ensure that your component is designed to be responsive, adapting seamlessly to different screen sizes and devices.
• Testing Considerations: Anticipate potential challenges or adjustments needed during the testing phase. Plan for how it will behave on various browsers and devices.
• Accessibility: Keep accessibility in mind, ensuring that users with different disabilities can still access and understand the content within it.

How to Implement the Marquee Component

To implement the component, start by creating a React environment with Vite.

npm create vite@latest

After which you navigate to your project directory, install the necessary packages and start up the dev server.

Setting up dev server

Next, create the elements for the JSX mockup for your component.

export default function App() {
  return (
    <div className=" main__container">
      <h1>My Marquee</h1>
      <section className=" ">
        <h2>Default Behaviour</h2>

        <div className="marquee">
          <ul className="marquee__content">
            <div className=" marquee__item">
              <img src={AndroidLogo} alt="" />
            </div>
            <div className=" marquee__item">
              <img src={BehanceLogo} alt="" />
            </div>
            <div className=" marquee__item">
              <img src={GoogleLogo} alt="" />
            </div>
            <div className=" marquee__item">
              <img src={InstagramLogo} alt="" />
            </div>
            <div className=" marquee__item">
              <img src={PaypalLogo} alt="" />
            </div>
            <div className=" marquee__item">
              <img src={SpotifyLogo} alt="" />
            </div>
          </ul>

          <ul aria-hidden="true" className="marquee__content">
            <div className=" marquee__item">
              <img src={AndroidLogo} alt="" />
            </div>
            <div className=" marquee__item">
              <img src={BehanceLogo} alt="" />
            </div>
            <div className=" marquee__item">
              <img src={GoogleLogo} alt="" />
            </div>
            <div className=" marquee__item">
              <img src={InstagramLogo} alt="" />
            </div>
            <div className=" marquee__item">
              <img src={PaypalLogo} alt="" />
            </div>
            <div className=" marquee__item">
              <img src={SpotifyLogo} alt="" />
            </div>
          </ul>
        </div>
      </section>
    </div>
  );
}

This includes a header for the component, the behavior of the component and the data in the component to be animated.

It is important to duplicate the data in the component as it would be used to achieve the duplicate effect. However, we’re hiding the second list initially using the aria-hidden='true' property.

To make it more visually appealing, add these styles.

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  padding: 2rem;
  width: 100%;
  min-height: 100vh;
  font-size: 1rem;
  line-height: 1.5;
}

* { box-sizing: border-box; }

h1 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  margin-block: 2rem 1rem;
  text-align: center;
}

h2 {
  font-size: 1.25rem;
  font-weight: 600;
}

section { margin-block: 3rem; }

.main__container {
  max-width: 1000px;
  margin-inline: auto;
  background: rgb(124, 145, 175);
  padding: 3rem;
}

/* Marquee styles */
.marquee {
  --gap: 1rem;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  border: 2px dashed lightgray;
}

.marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
}

.marquee__content img {
  max-width: 2rem;
  width: 100%;
  object-fit: contain;
}

.marquee__content > * {
  flex: 0 0 auto;
  color: white;
  background: #e8daef;
  margin: 2px;
  padding: 1rem 2rem;
  border-radius: 0.25rem;
  text-align: center;
}

.marquee__item {
  display: flex;
  justify-content: center;
  align-items: center;
}

ul { padding-left: 0; }

At the moment, your component should look like this;

UI after applying styles

To animate this component, start by defining custom CSS keyframes.

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - var(--gap))); }
}

Note: The gap used is the same gap between the marquee items.
Then, assign those keyframes to a class.

/* Enable animation */
.enable-animation .marquee__content {
  animation: scroll 10s linear infinite;
}

Finally, add that class to your section element.

<section className="enable-animation">

And with that, your component should already be animating.

Animated marquee

How to Enhance the Marquee Component

This component goes beyond the regular infinite animations (as shown above), it often possess some extra functionalities such as:

• Pause on Hover: While using a marquee can be beneficial to show a bunch of content more dynamically, the speed of the animation or the position of the information relevant to the user might cause issues, especially for slow readers.

To fix this, you can implement a pause functionality to halt it when the user hovers over it. Just add the CSS code below.

/* Pause on hover */
.marquee:hover .marquee__content {
  animation-play-state: paused;
}

And with that, it pauses on hover.

Animated marquee that pauses on hover

• Reverse on Double Tap: In the case where a user has passed important information and wants to see it without waiting for the looping animation to bring it back, it’s important to provide a means to achieve that.

By double tapping on the component, the animation plays in the opposite direction, showing the information the user just passed. This feature not only promotes accessibility but also gives your web pages a snappy feel, as it provides a quicker way to get information.

To implement this, start by creating a reverse animation state.

 const [reverseAnimation, setReverseAnimation] = useState(false);

The create a function to flip the state of the animation.

const handleDoubleClick = () => {
    setReverseAnimation((prev) => !prev);
  };

After that, create the CSS class rule to reverse the animation.

/* Reverse animation */
.marquee--reverse .marquee__content {
  animation-direction: reverse !important;
}

Then attach the handler function to the component.

<div className="marquee" onDoubleClick={handleDoubleClick}>
      <ul className="marquee__content">
        <div className=" marquee__item">
          <img src={AndroidLogo} alt="" />
        </div>
        <div className=" marquee__item">
          <img src={BehanceLogo} alt="" />
        </div>
        <div className=" marquee__item">
          <img src={GoogleLogo} alt="" />
        </div>
        <div className=" marquee__item">
          <img src={InstagramLogo} alt="" />
        </div>
        <div className=" marquee__item">
          <img src={PaypalLogo} alt="" />
        </div>
        <div className=" marquee__item">
          <img src={SpotifyLogo} alt="" />
        </div>
      </ul>

      <ul aria-hidden="true" className="marquee__content">
        <div className=" marquee__item">
          <img src={AndroidLogo} alt="" />
        </div>
        <div className=" marquee__item">
          <img src={BehanceLogo} alt="" />
        </div>
        <div className=" marquee__item">
          <img src={GoogleLogo} alt="" />
        </div>
        <div className=" marquee__item">
          <img src={InstagramLogo} alt="" />
        </div>
        <div className=" marquee__item">
          <img src={PaypalLogo} alt="" />
        </div>
        <div className=" marquee__item">
          <img src={SpotifyLogo} alt="" />
        </div>
      </ul>
</div>

Finally, conditionally add the reverse class to the component which reverses the animation on double click.

 <div className={`marquee ${reverseAnimation && "marquee--reverse"}`} 
      onDoubleClick={handleDoubleClick}>

Double-clicking the component now gives;

Animated marquee that reverses on double click

• Pause/Play on Space Bar Click: Another functionality that can be added to improve UX, especially for keyboard users is to pause or play it on press of the spacebar. This mimics the functionality of how videos work on the web and would help improve accessibility for users.

To implement this, start by creating a state to store the current paused state of the animation.

const [isAnimationPaused, setIsAnimationPaused] = useState(false);

Then create the CSS rule for the paused state.

/* Pause animation */
.marquee--paused .marquee__content {
  animation-play-state: paused !important;
}

After that, create an effect that updates the isAnimationPaused state each time the space bar is pressed.

 useEffect(() => {
    const handleKeyPress = (event) => {
      if (event.code === "Space") {

        setIsAnimationPaused((prev) => !prev);
      }
    };
    document.addEventListener("keydown", handleKeyPress);

   // Clean-up function when component unmounts
    return () => {
      document.removeEventListener("keydown", handleKeyPress);
    };
  }, []);

This way, the state toggles between true and false based on user presses.
Finally, dynamically add the paused class to your component.

<div className={`marquee ${reverseAnimation && "marquee--reverse"} ${
       isAnimationPaused && "marquee--paused"}`} onDoubleClick={handleDoubleClick}>

And with that, your component pauses and replays each time you press the space bar.

Animated marquee that can be paused with space bar

Best Practices and Tips for Marquee Component Development

Some of the best practices to consider when building this component includes:

• Lazy Loading Images: In the case where your marquee has a lot of high-quality images which could be large, it is essential to optimize them before building the component.
  Lazy loading defers the browser from downloading the images until they are needed (required to be shown in the viewport), cutting down on overall page load time.

To achieve this, add loading='lazy' property to your images.

<ul className="marquee__content">
    <div className=" marquee__item">
      <img src={AndroidLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={BehanceLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={GoogleLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={InstagramLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={PaypalLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={SpotifyLogo} alt="" loading="lazy" />
    </div>
  </ul>

  <ul aria-hidden="true" className="marquee__content">
    <div className=" marquee__item">
      <img src={AndroidLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={BehanceLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={GoogleLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={InstagramLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={PaypalLogo} alt="" loading="lazy" />
    </div>
    <div className=" marquee__item">
      <img src={SpotifyLogo} alt="" loading="lazy" />
    </div>
</ul>

• Mindful Animation Speed: When implementing the animation, it's crucial to strike a careful balance in terms of speed. The animation pace should be visually appealing, capturing the user's attention without sacrificing readability or causing discomfort.
  This involves thoughtful consideration of how quickly the content scrolls across the screen.
  By paying attention to animation speed and finding the right balance, you enhance the overall user experience, making it an effective and enjoyable element on your website.
• Think of Users with Motion Sensitivity: Inclusive design means taking into account the needs and preferences of different users, including those with motion sensitivity. Certain users may prefer less movement due to conditions such as vestibular disorders or simply for personal comfort.
  To support these users, you can use the prefers-reduced-motion media query in your component.

/* Pause animation when reduced-motion is set */
@media (prefers-reduced-motion: reduce) {
  .marquee__content {
    animation-play-state: paused !important;
  }
}

• Proper Documentation: Provide clear documentation on how users can use your component effectively so that they won't struggle to use it or don’t miss out on the all the features it has. Consider using labels around the component or a pop-up to convey short instructions on its use.

Conclusion

Your guide to React Marquee Components is complete! From planning to execution, you've dived into creating dynamic scrolling elements for your web projects.

Remember, this component is more than motion—it's an interactive story. Whether sharing crucial info, promoting events, or injecting dynamism, your marquee is a versatile addition to your toolkit.

But this journey is just the beginning. Adjust speeds, consider sensitivities, and adopt best practices to refine your marquee. Let creativity flow, and may your scrolling stories leave a lasting impact.

Prioritize user experience, experiment with enhancements, and let your development shine in the web landscape. Happy scrolling!

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

• Twitter: @jajadavid8
• LinkedIn: David Jaja
• Email: Jajadavidjid@gmail.com

In this article, we'll delve into the origins, rise, and practical implementation of the bento grid trend, exploring how it intersects aesthetics with functionality in modern web design.

Prerequisites

• Fundamentals of HTML and CSS (CSS Grid)
• Basics of Web Design

The Philosophy Behind Bento Grids

The concept of bento grids traces back to the Japanese tradition of serving a variety of dishes in a single, segmented container known as a bento box. This method of presentation not only ensures a balanced meal but also pleases the eye with its organization and simplicity.

Bento Japanese Box

Translated into web design, bento grids offer a similar experience: diverse content segmented into distinct areas, making it both accessible and aesthetically balanced.

The bento grid philosophy hinges on compartmentalization and organization. It creates a predictable rhythm that users can follow, reducing cognitive load and enhancing the overall user experience. The design's symmetry and order offers a sense of calm and control, appealing to users' desire for simplicity and structure amidst the chaos of the internet.

The Rise of Bento Grids

While the use of grids in design is not new, the specific trend of bento grids began to gain traction as designers sought to create more organized and mobile-responsive layouts.

Powerhouses like Apple use this design pattern in promotional videos for their products as well.

Apple mac promotional infographic

The trend also saw a surge in popularity with the advent of CSS Grid Layout and the growing focus on minimalist design that doesn't sacrifice functionality for form.

Platforms that emphasize content, such as online magazines, educational sites, and portfolios, were among the early adopters of bento grids. Their adoption highlighted the grid's ability to present diverse content types in a harmonious layout, thereby improving navigation and readability.

Examining the Trend

Clean lines, geometric shapes, and a clear space division often characterize modern bento grids. They usually consist of:

• The title of a feature
• A short description of the feature
• Some infographic or interactive content.

This trend has been propelled by its positive impact on user experience. A well-implemented bento grid guides users through the website with ease, allowing quick access to information without overwhelming them with choices.

Pros of Using Bento Grids

1. Enhanced Organization and Cohesion: Bento grids bring a high level of organization to web design, allowing for a cohesive presentation of varied content. This segmentation makes it easier for users to digest information in a structured manner.
2. Aesthetic Appeal: The symmetry and clean lines inherent in bento grids are visually appealing, providing a neat and professional look that can enhance the visual identity of a website.
3. Reduced Scroll Fatigue: By efficiently utilizing space within a single viewport, bento grids can display a significant amount of content, which can reduce the need for excessive scrolling.
4. Metaphorical Clarity: The bento box metaphor effectively communicates the concept of a complete and balanced experience, which can be particularly useful for showcasing product features or a portfolio of work.
5. Improved Navigation: The predictability and order of bento grids aid in straightforward navigation, as users can easily move from one compartmentalized section to another.
6. Compatibility with Responsive Design: Bento grids seamlessly integrate with responsive design principles, facilitating effortless adjustment of a website's layout to accommodate diverse screen sizes and devices.
7. Focus on Content: The grid layout emphasizes content without unnecessary distractions, which can be crucial for sites where content is important, such as online galleries or information-driven platforms.
8. Facilitates Comprehensive Product Capture: In the context of showcasing products, bento grids offer users the convenience of capturing all essential information at once. With content neatly organized within distinct compartments, users can easily screenshot or save a single view of the grid, ensuring they capture all relevant details without the need for multiple interactions or navigating through various pages.

Cons of Bento Grids

1. Potential Information Overload: While bento grids can reduce cognitive load through organization, there's a risk of cramming too much information into a single screen, potentially overwhelming users.
2. Limited Visual Hierarchy: The uniform structure of bento grids can sometimes lead to a lack of visual hierarchy, making it harder for users to determine the importance of certain content over others.
3. Considerations Regarding Hick's Law: A densely packed grid presents users with a multitude of options, potentially prolonging their decision-making process. This abundance of choices can result in the paradox of choice, where users experience indecision or slower navigation due to the overwhelming array of options available.
4. Design Rigidity: The structured nature of bento grids can sometimes restrict creative design elements and lead to a monotonous user experience if not implemented with variation and dynamic content.
5. SEO Challenges: Search engines may have difficulty parsing the relevance of content when it's distributed across numerous grid compartments, potentially impacting SEO if not structured properly.
6. Accessibility Concerns: The compartmentalized nature of bento grids might present accessibility challenges, particularly for users who rely on screen readers or keyboard navigation, if not designed with accessibility standards in mind.

Bento Grids in Practice

Creating bento grids typically involves CSS grid layout and flexbox, which offer robust solutions for creating complex layouts with ease. Bento grids are favored for their flexibility and responsiveness, allowing content to reflow seamlessly across different screen sizes.

For this article, here’s the design we’re going to create the interface below:

desktop design to recreate

To begin, create a couple of divs in your markup.

<body>
    <div class="grid">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>

Then utilize the grid property, grid-template-columns, and grid-template-rows to define the number of rows and columns you desire.

.grid {
  background: hsl(36, 100%, 99%);
  width: 100%;
  max-width: 1500px;
  height: 1000px;
  display: grid;
  gap: 1.5vw;
  padding: 1vw;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
}

The final ingredient to achieving a bento-style grid lies in the use of the grid-template-areas property which is used to name grid areas according to the position you want them to occupy on the page.

.grid {
  background: hsl(36, 100%, 99%);
  width: 100%;
  max-width: 1500px;
  height: 1000px;
  display: grid;
  gap: 1.5vw;
  padding: 1vw;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
    "hero hero hero hero aside2 aside2"
    "hero hero hero hero aside2 aside2"
    "hero hero hero hero aside2 aside2"
    "hero hero hero hero aside2 aside2"
    "aside3 aside3 aside4 aside4 aside5 aside5 ";
}

Finally, assign those names to the exact element you want to take up that space.

.item {
  border: 2px solid #464545;
  border-radius: 5px;
}

.grid .item:nth-child(1) {
  grid-area: hero;
}
.grid .item:nth-child(2) {
  grid-area: aside2;
}

.grid .item:nth-child(3) {
  grid-area: aside3;
}
.grid .item:nth-child(4) {
  grid-area: aside4;
}

.grid .item:nth-child(5) {
  grid-area: aside5;
}

You should have this result:

Bento structure achieved

All that’s left is to fill the boxes with their appropriate content and assets. You can some assets/content in this repo.

Bento Grid with its content filled

Another usefulness of the grid-template-areas property is the ease by which you can achieve responsiveness with it. In our example, to make the page responsive, you pass in a new string pair on your preferred threshold.

On tablet screens:

@media screen and (max-width: 1000px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "hero   hero   hero   hero"
      "hero   hero   hero   hero"
      "aside2 aside2 aside2 aside3"
      "aside4 aside4 aside5 aside5";
  }
}

Tablet Screens

And on smaller screens:

@media screen and (max-width: 750px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "hero   hero   hero"
      "hero   hero   hero"
      "aside2 aside2 aside2"
      "aside3 aside3 aside3"
      "aside4 aside4 aside4"
      "aside5 aside5 aside5";
  }
}

Smaller screens

Common Rules of Bento Grids

Here are some good rules of thumb when building bento grids:

• Group Related Content: One of the fundamental principles of bento grids is to group related content together within each segment. This enhances the user's ability to quickly locate and understand the information they're seeking. By organizing content logically, designers can improve user engagement and satisfaction.
• Vary Box Sizes: Avoid using the same size for every box within the grid. Varying box sizes can create visual interest and hierarchy, drawing attention to key elements while maintaining overall balance. This variation can help guide users through the content and highlight important information effectively.
• Establish Visual Hiererchy: Although varying box sizes contribute to visual hierarchy, establishing visual hierarchy encompasses a broader range of design elements. In addition to box sizes, designers should consider factors such as colour, typography, and placement to prioritize certain elements over others.
• Prioritize Center Square: In traditional bento grids, the center square often holds a special significance and acts as a focal point. Designers can use this central square to showcase critical information or highlight key features, effectively punctuating the grid and drawing users' attention to its core elements.
• Limit the Number of Boxes: To maintain clarity and avoid overwhelming users, it's recommended to use nine or fewer boxes within the bento grid. Limiting the number of boxes ensures that the layout remains manageable and facilitates easier navigation and comprehension for users.
• Consider Swirl Pattern: While not a strict rule, considering a swirl pattern can add an extra layer of visual interest to the bento grid design. This involves arranging content in a curved or swirling pattern within the grid, creating a dynamic and engaging layout that encourages exploration.

Additional Information

I’d like to point out a couple of things in the article not highlighted.

• First and foremost, the article was inspired by Tom Geoco’s video on bento grids.
• BentoGrids is an excellent resource for finding design inspiration if you’re interested. If you’re interested in the full code, here’s the repo, GitHub, and the Live version. Demo.
• The design inspiration for the grid we built was gotten from FrontEnd Mentor.

Conclusion

Bento grids stand out as a significant trend in the modern web design landscape, offering a blend of aesthetic appeal and functional clarity. They represent a design ethos that values order, beauty, and user-centricity.

As web technologies evolve, the principles underlying bento grids will continue to inform best practices, encouraging designers to create experiences that are not only visually compelling but also intuitively navigable.

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

• Twitter / X: @jajadavid8
• LinkedIn: David Jaja
• Email: Jajadavidjid@gmail.com

Here, we'll unravel the mysteries of breadcrumb trails in React applications. We'll dissect their types, and you'll learn how to seamlessly integrate them into your web projects for better user navigation.

Prerequisites

• Fundamentals of CSS and TailwindCSS
• Fundamentals of ES6 JavaScript and React
• Fundamentals of Routing and the React Router library ( check out this routing article if you’re unfamiliar).

What We'll Cover:

1. Understanding Breadcrumbs
2. Types of Breadcrumb Navigation
3. How to Build the Breadcrumb Component in React
4. How to Create the Breadcrumb Component Structure
   – Location-Based Breadcrumbs
   – Path-Based Breadcrumbs
   – Attribute-Based Breadcrumbs
5. Best Practices for Breadcrumbs in React
6. Conclusion

Understanding Breadcrumbs

Before we venture deeper into the intricacies of breadcrumbs, let's set the scene. Imagine the classic tale of Hansel and Gretel, where they leave a trail of breadcrumbs to find their way back home through the dense forest.

In the digital realm, breadcrumbs serve a similar purpose, albeit with a twist.

Hansel And Gretel

Breadcrumbs, in the context of web navigation, are a series of hierarchical links typically displayed at the top of a webpage. These links reflect the user's path from the homepage to the current page, allowing them to retrace their steps or navigate to higher-level pages.

These navigation aids have a fascinating history and a crucial role in guiding users through a digital space.

A typical example of what this component looks like is shown below:

Breadcrumb example: Home Page > Products Page > Single Product Page (current page)

Types of Breadcrumb Navigation

• Location-based Breadcrumbs: Like landmarks in a forest, location-based breadcrumbs show users where they are within the website's hierarchy. They show the current page's position relative to other pages on the site.
• Path-based Breadcrumbs: Like retracing your steps in the forest, path-based breadcrumbs display the user's journey through the website. They show the sequence of pages visited, helping users understand how they arrived at the current page.
• Attribute-based Breadcrumbs: These breadcrumbs highlight specific attributes or characteristics of the current page. They offer more context to the user's navigation, akin to discovering unique features along a trail.

How to Build the Breadcrumb Component in React

The first step in this section involves creating a React environment. Before you begin, make sure to install Node.js on your computer if you don't have it already.

How to Set Up a React Environment

After installing Node.js, use Vite (a modern build tool for React projects) to create a new React project. In your local terminal, run the command:

npm create vite@latest

Select React as your framework and your preferred variant.

Setting up a react environment with Vite

To install the necessary packages, run npm install and open it in your IDE.

Finally, clear the boilerplate code and start up your server using the command npm run dev.

This project will use Tailwind for styling. To get that set up, run the following command:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

After this command, a tailwind.config.js file will be created. Head into the config file, delete its content, and paste this in there instead:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Then, open your index.css file and paste the style configs (preferably at the top):

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, restart your dev server to get access to Tailwind.

How to Create the Breadcrumb Component Structure

Rather than building one breadcrumb component, we’re going to build all three types mentioned above so you can see how they work.

Location-Based Breadcrumbs

This type is the most basic type of breadcrumb that involves showing all the routes readily available for the user to navigate.

To begin, start by creating a Breadcrumb file and pasting in these styles:

import SlashImg from "./assets/slash.png";

export default function Breadcrumb() {
  return (
    <div className="bg-white ">
      <ul className=" flex border p-2 gap-6 text-xl text-[#2E4053] items-center">
        <li className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md">
          Home
        </li>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <li className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md transition-all duration-300">
          Products
        </li>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <li className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md transition-all duration-300">
          About
        </li>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <li className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md transition-all duration-300">
          FAQ
        </li>
      </ul>
    </div>
  );
}

Then import this file into a Home component which you also need to create:

import Breadcrumb from "./Breadcrumb";

export default function Home() {
  return (
    <div className=" h-[100dvh] bg-gray-200">
      <div className="flex flex-col items-center gap-8 ">
        <h1 className=" text-4xl text-[#2E4053 ] mt-20">
          My Breadcrumb Component 🍞
        </h1>
        <Breadcrumb />
      </div>
    </div>
  );
}

At the moment, your component looks like this:

Breadcrumb after rendering on UI

To perform navigation functionalities with this component, start by installing React Router (a widely used library for managing navigation and routing in React applications).

npm i react-router-dom

Then create the routes in your App component.

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

import About from "./About";
import FAQ from "./FAQ";
import Home from "./Home";
import Homepage from "./Homepage";
import Products from "./Products";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route index element={<Navigate replace to="home" />} />
        <Route path="/" element={<Home />}>
          <Route path="home" element={<Homepage />} />
          <Route path="products" element={<Products />} />
          <Route path="about" element={<About />} />
          <Route path="faq" element={<FAQ />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

The code block above is a configuration for client-side routing in a React application using React Router v6. It sets up a BrowserRouter to handle dynamic routing and defines a series of Route components within Routes to map URL paths to React components.

• BrowserRouter is a router implementation that uses the HTML5 history API to keep the UI in sync with the URL.
• Navigate redirects users to a specific route. In this case, it redirects from the index route to /home.
• Route components define a mapping between a path and a component. The element prop specifies what to render when the path matches the current URL.
• The path="/" element={<Home />} route is a nested route that serves as a layout for its child routes. It renders the Home component when the URL is /. Nested inside the Home route are routes for home, products, about, and faq, each rendering their respective components when their path matches the URL.

Next, head over to your Breadcrumb component and change the list elements to Link elements (imported from React Router) to aid routing between routes.

import { Link } from "react-router-dom";
import SlashImg from "./assets/slash.png";

export default function Breadcrumb() {
  return (
    <div className="bg-white ">
      <ul className=" flex border p-2 gap-6 text-xl text-[#2E4053] items-center">
        <Link
          to={"home"}
          className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md">
          Home
        </Link>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <Link
          to={"products"}
          className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md transition-all duration-300">
          Products
        </Link>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <Link
          to={"about"}
          className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md transition-all duration-300">
          About
        </Link>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <Link
          to={"faq"}
          className=" cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md transition-all duration-300">
          FAQ
        </Link>
      </ul>
    </div>
  );
}

Then use the Outlet component provided by React Router to display the content of each route in the Home component.

import Breadcrumb from "./Breadcrumb";
import { Outlet } from "react-router-dom";

export default function Home() {
  return (
    <div className=" h-[100dvh] bg-gray-200">
      <div className="flex flex-col items-center gap-8 ">
        <h1 className=" text-4xl text-[#2E4053 ] mt-20">
          My Breadcrumb Component 🍞
        </h1>
        <Breadcrumb />
        <Outlet />
      </div>
    </div>
  );
}

Testing out your component in the browser now gives the following result:

Routing with the Breadcrumb component

With this, your location-based breadcrumbs are functional, but we can take it a step further. To improve the UX, we can add an active class to the currently active route, creating a visual indicator of where the user is at every point in time.

Start by extracting the current location of the user in the Breadcrumb component:

  const location = useLocation();

Then use the pathname property to add an active class to each link:

import { Link, useLocation } from "react-router-dom";

import SlashImg from "./assets/slash.png";

export default function Breadcrumb() {
  const location = useLocation();
  console.log(location.pathname);

  return (
    <div className="bg-white ">
      <ul className=" flex border p-2 gap-6 text-xl text-[#2E4053] items-center">
        <Link
          to={"home"}
          className={`cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md ${
            location.pathname === "/home" && "bg-[#b572d6] text-white"
          }`}>
          Home
        </Link>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <Link
          to={"products"}
          className={`cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md ${
            location.pathname === "/products" && "bg-[#b572d6] text-white"
          }`}>
          Products
        </Link>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <Link
          to={"about"}
          className={`cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md ${
            location.pathname === "/about" && "bg-[#b572d6] text-white"
          }`}>
          About
        </Link>
        <img src={SlashImg} className="w-5 h-5 " alt="" />
        <Link
          to={"faq"}
          className={`cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md ${
            location.pathname === "/faq" && "bg-[#b572d6] text-white"
          }`}>
          FAQ
        </Link>
      </ul>
    </div>
  );
}

This now gives the following result:

Routing with the Breadcrumb component after adding an active class

Tasty! 🍩

Path-Based Breadcrumbs

This breadcrumb type uses the pattern of progressive reveal to better guide the users on where they are based on their actions.

Here we’re going to create two routes and move from the first to the third (Home to Single product page).

Start by modifying your Home component a bit.

export default function Home() {
  return (
    <div className=" h-[100dvh] bg-gray-200">
      <div className="flex flex-col items-center gap-8 ">
        <h1 className=" text-4xl text-[#2E4053 ] mt-20">
          My Breadcrumb Component 🍞
        </h1>
        <Breadcrumb />
        <Outlet />

        <div className="flex gap-4 p-2 ">
          <Link to="products" className=" rounded-md p-2 bg-[#777] text-white">
            Products
          </Link>
          <Link
            to="products/1"
            className=" rounded-md p-2 bg-[#777] text-white">
            Single Product
          </Link>
        </div>
      </div>
    </div>
  );
}

The changes include creating a single product page which we'll route to later.

Then make a nested route path for the page in the App component:

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

import Home from "./Home";
import Homepage from "./Homepage";
import Products from "./Products";
import SingleProduct from "./SingleProduct";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route index element={<Navigate replace to="home" />} />
        <Route path="/" element={<Home />}>
          <Route path="home" element={<Homepage />} />
          <Route path="products" element={<Products />}>
            <Route path=":productId" element={<SingleProduct />} />
          </Route>
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

For the already existing Products page, add these styles and changes:

import { Outlet } from "react-router-dom";

export default function Products() {
  return (
    <div className="bg-[#EDBB99] p-2 w-96 h-96 flex flex-col items-center">
      <h1>Products Page</h1>
      <Outlet />
    </div>
  );
}

Page after creating the Single Product page without any routing

Finally, modify your breadcrumb component to display the routes when you route to them from the home page.

import { Link, useLocation } from "react-router-dom";

import RightArrowImg from "./assets/right-icon.png";

export default function Breadcrumb() {
  const location = useLocation();

  return (
    <div className="bg-white ">
      <ul className=" flex border p-2 gap-6 text-xl text-[#2E4053] items-center">
        <Link
          to={"home"}
          className={`cursor-pointer hover:bg-[#E8DAEF] hover:text-black p-4 rounded-md ${
            location.pathname === "/home" && "bg-[#b572d6] text-white"
          }`}>
          Home
        </Link>
        {location.pathname.includes("/products") && (
          <>
            <img src={RightArrowImg} className="w-5 h-5 " alt="" />
            <Link
              to={"products"}
              className={` hover:text-black cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md ${
                location.pathname.includes("/products") &&
                " bg-[#b572d6] text-white"
              } ${
                location.pathname.includes("/products/") &&
                " bg-[#E8DAEF] text-black"
              }`}>
              Products
            </Link>
          </>
        )}
        {location.pathname.includes(`/products/`) && (
          <>
            <img src={RightArrowImg} className="w-5 h-5 " alt="" />
            <Link
              to={"products"}
              className={`hover:text-black  cursor-pointer hover:bg-[#E8DAEF] p-4 rounded-md ${
                location.pathname.includes("/products") &&
                "bg-[#b572d6] text-white"
              }`}>
              Single Product
            </Link>
          </>
        )}
      </ul>
    </div>
  );
}

In the code above, we’re displaying more breadcrumbs based on the route we’re in and applying styles to reflect the route changes.

Testing our component now gives the following result:

Routing with the Breadcrumb component after adding a nested route

Sweet! 🍬

Attribute-Based Breadcrumbs

Attribute-based breadcrumbs focus on highlighting specific attributes or characteristics of the current page, such as tags, categories, or any other relevant metadata.

Instead of simply showing the user's path through the website hierarchy, they provide additional context that can aid in navigation and understanding.

A common use case for them is on E-commerce sites where you go through multiple items and filter through multiple product properties to find your desired product.

To begin, our app component is going to look drastically different with no routing done.

import Products from "./Products";

export default function App() {
  return (
    <div className=" h-[100dvh] bg-[#EDBB99]">
      <Products />
    </div>
  );
}

Then add this JSX to your Products component:

import Breadcrumb from "./Breadcrumb";

export default function Products() {
  const dogsArray = [
    {
      size: "S",
      color: "white",
      image: "/small-white-dog.jpg",
      name: "Gigi",
      age: 1,
    },
    {
      size: "M",
      color: "white",
      image: "/medium-white-dog.jpg",
      name: "Tom",
      age: 2,
    },
    {
      size: "L",
      color: "white",
      image: "/big-white-dog.jpg",
      name: "Jake",
      age: 3,
    },
    {
      size: "S",
      color: "black",
      image: "/small-black-dog.jpg",
      name: "Hill",
      age: 1,
    },
    {
      size: "M",
      color: "black",
      image: "/medium-black-dog.jpg",
      name: "Jack",
      age: 2,
    },
    {
      size: "L",
      color: "black",
      image: "/big-black-dog.jpg",
      name: "Jones",
      age: 3,
    },
    {
      size: "S",
      color: "brown",
      image: "/small-brown-dog.jpg",
      name: "Herbert",
      age: 1,
    },
    {
      size: "M",
      color: "brown",
      image: "/medium-brown-dog.jpg",
      name: "Coco",
      age: 2,
    },
    {
      size: "L",
      color: "brown",
      image: "/big-brown-dog.jpg",
      name: "Benny",
      age: 3,
    },
  ];


  return (
    <div className="flex flex-col items-center p-2">
      <h1 className="p-4">Adopt Page</h1>
      <Breadcrumb />
      <main>
        <div className="relative grid grid-cols-5 gap-6">
          {dogsArray.map((dog) => (
            <div key={dog.name}>
              <div className=" w-[225px] rounded-md overflow-hidden">
                <img className="w-full " src={dog.image} alt="" />
              </div>
              <div className="grid items-center grid-cols-2 gap-2 mt-2">
                <div className="flex items-center gap-2">
                  <span>Name:</span>
                  <p className="text-center text-white bg-orange-900 border rounded-[4px] p-1.5 min-w-14">
                    {dog.name}
                  </p>
                </div>
                <div className="flex gap-2 ">
                  <span>Size:</span>
                  <p className="text-center text-white min-w-14">{dog.size}</p>
                </div>
                <div className="flex gap-2 ">
                  <span>Color:</span>
                  <p className="text-center text-white capitalize min-w-14">
                    {dog.color}
                  </p>
                </div>
                <div className="flex gap-2 ">
                  <span>Age:</span>
                  <p className="text-center text-white min-w-14">
                    {`${dog.age + " " + "year"}${dog.age > 1 ? "s" : ""}`}
                  </p>
                </div>
              </div>
            </div>
          ))}

          <div className="absolute bottom-0 left-0 p-1 translate-y-[110%]">
            <h2 className="mb-2">Filter by</h2>
            <div className="flex items-center mb-4">
              <h3 className="w-12">Size:</h3>
              <div className="flex gap-2">
                <button
                  className={`p-2 text-center bg-white rounded-md min-w-14 `}>
                  All
                </button>
                <button
                  className={`p-2 text-center bg-white rounded-md min-w-14 `}>
                  S
                </button>
                <button
                  className={`p-2 text-center bg-white rounded-md min-w-14 `}>
                  M
                </button>
                <button
                  className={`p-2 text-center bg-white rounded-md min-w-14 `}>
                  L
                </button>
              </div>
            </div>
            <div className="flex items-center">
              <h3 className="w-12">Color:</h3>
              <div className="flex gap-2">
                <button
                  className={`p-2 text-center bg-white  rounded-md min-w-14 `}>
                  All
                </button>
                <button
                  className={`p-2 text-center bg-white  rounded-md min-w-14`}>
                  White
                </button>
                <button
                  className={`p-2 text-center rounded-md bg-white min-w-14 `}>
                  Brown
                </button>
                <button
                  className={`p-2 text-center rounded-md bg-white  min-w-14 `}>
                  Black
                </button>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

This JSX uses dummy dog data to create a template and style it with tailwind.

At the moment, your app should look like this;

Page after looping over the dummy dog data

To implement the attribute-based breadcrumbs, start by creating two states for the attributes you want to filter by:

const [sizeFilter, setSizeFilter] = useState(null);
const [colorFilter, setColorFilter] = useState(null);

Then create a function to filter based on the value passed in:

  const filteredDogs = dogsArray.filter((dog) => {
    if (sizeFilter && dog.size !== sizeFilter) return false;

    if (colorFilter && dog.color !== colorFilter) return false;

    return true;
  });

After that, change the array you used used to create the JSX to the array returned from the function:

 {filteredDogs.map((dog) => (
            <div key={dog.name}>

Finally, use the setter function to pass in the values you want to filter by:

<main>
        <div className="relative grid grid-cols-5 gap-6">
          {filteredDogs.map((dog) => (
            <div key={dog.name}>
              <div className=" w-[225px] rounded-md overflow-hidden">
                <img className="w-full " src={dog.image} alt="" />
              </div>
              <div className="grid items-center grid-cols-2 gap-2 mt-2">
                <div className="flex items-center gap-2">
                  <span>Name:</span>
                  <p className="text-center text-white bg-orange-900 border rounded-[4px] p-1.5 min-w-14">
                    {dog.name}
                  </p>
                </div>
                <div className="flex gap-2 ">
                  <span>Size:</span>
                  <p className="text-center text-white min-w-14">{dog.size}</p>
                </div>
                <div className="flex gap-2 ">
                  <span>Color:</span>
                  <p className="text-center text-white capitalize min-w-14">
                    {dog.color}
                  </p>
                </div>
                <div className="flex gap-2 ">
                  <span>Age:</span>
                  <p className="text-center text-white min-w-14">
                    {`${dog.age + " " + "year"}${dog.age > 1 ? "s" : ""}`}
                  </p>
                </div>
              </div>
            </div>
          ))}

          <div className="absolute bottom-0 left-0 p-1 translate-y-[110%]">
            <h2 className="mb-2">Filter by</h2>
            <div className="flex items-center mb-4">
              <h3 className="w-12">Size:</h3>
              <div className="flex gap-2">
                <button
                  // Reset size state
                  onClick={() => setSizeFilter(null)}
                  className={`p-2 text-center bg-white rounded-md min-w-14 `}>
                  All
                </button>
                <button
                  // Set filter to small
                  onClick={() => setSizeFilter("S")}
                  className={`p-2 text-center bg-white rounded-md min-w-14 `}>
                  S
                </button>
                <button
                  // Set filter to medium
                  onClick={() => setSizeFilter("M")}
                  className={`p-2 text-center bg-white rounded-md min-w-14 `}>
                  M
                </button>
                <button
                  // Set filter to large
                  onClick={() => setSizeFilter("L")}
                  className={`p-2 text-center bg-white rounded-md min-w-14 `}>
                  L
                </button>
              </div>
            </div>
            <div className="flex items-center">
              <h3 className="w-12">Color:</h3>
              <div className="flex gap-2">
                <button
                  // Reset color state
                  onClick={() => setColorFilter(null)}
                  className={`p-2 text-center bg-white  rounded-md min-w-14 `}>
                  All
                </button>
                <button
                  // Set color to white
                  onClick={() => setColorFilter("white")}
                  className={`p-2 text-center bg-white  rounded-md min-w-14 `}>
                  White
                </button>
                <button
                  // Set color to brown
                  onClick={() => setColorFilter("brown")}
                  className={`p-2 text-center rounded-md bg-white min-w-14 `}>
                  Brown
                </button>

                <button
                  // Set color to black
                  onClick={() => setColorFilter("black")}
                  className={`p-2 text-center rounded-md bg-white  min-w-14 `}>
                  Black
                </button>
              </div>
            </div>
          </div>
        </div>
      </main>