Part 81: Enhancing User Experience with a Client-Side SearchBox in React

[App] Client-Side Data Fetching

[App] Client-Side Data Fetching

In modern web development, providing a seamless user experience often involves integrating dynamic components that enhance interactivity. Today, we'll explore the implementation of a client-side SearchBox using the Combobox component from Headless UI, a popular library known for its unstyled, accessible UI components.

Why Client-Side Rendering?

As we modernize web applications, many existing React libraries were designed before the advent of Server Components. These libraries often assume a client-side environment, which can lead to issues when rendered on the server. To circumvent this, we've decided to render our Combobox component exclusively on the client side, ensuring smooth functionality without server-side rendering hiccups.

Building the SearchBox

Step 1: Setting Up the Component

We'll start by defining a basic SearchBox component. To ensure that the Combobox renders only on the client, we use a custom hook, useIsClient, which we discussed in a previous post. This hook helps us conditionally render components based on the environment.

Step 2: Displaying Options

Our goal is to have the Combobox display a dropdown list of options. Here's a step-by-step guide:

1. Data Setup: For demonstration, we use hardcoded review data. Each review has a slug and a title. The slug will be used to form URLs when a user selects an option, while the title is displayed in the dropdown.

   const reviews = [
     { slug: 'hades-2018', title: 'Hades' },
     { slug: 'fall-guys', title: 'Fall Guys: Ultimate Knockout' },
     { slug: 'black-mesa', title: 'Black Mesa' },
     { slug: 'disco-elysium', title: 'Disco Elysium' },
     { slug: 'dead-cells', title: 'Dead Cells' },
   ];

2. Combobox Structure: We add a Combobox.Options component to list the review titles. Each option is rendered using Combobox.Option, which requires a unique key, so we use the review.slug.

   <Combobox>
     <Combobox.Input placeholder="Search…" className="border px-2 py-1 rounded w-full" />
     <Combobox.Options className="absolute bg-white py-1 w-full">
       {reviews.map((review) => (
         <Combobox.Option key={review.slug} value={review}>
           {({ active }) => (
             <span className={`block px-2 truncate w-full ${active ? 'bg-orange-100' : ''}`}>
               {review.title}
             </span>
           )}
         </Combobox.Option>
       ))}
     </Combobox.Options>
   </Combobox>

Step 3: Styling the Dropdown

To ensure the dropdown is user-friendly, we apply some basic styling:

• Positioning: We wrap the Combobox in a div with relative positioning, allowing the dropdown to be absolute and aligned below the input field.

• Appearance: Using Tailwind CSS, we add padding, borders, and a background color to improve readability.

<div className="relative w-48">
  <Combobox>
    <Combobox.Input placeholder="Search…" className="border px-2 py-1 rounded w-full" />
    <Combobox.Options className="absolute bg-white py-1 w-full">
      {reviews.map((review) => (
        <Combobox.Option key={review.slug} value={review}>
          {({ active }) => (
            <span className={`block px-2 truncate w-full ${active ? 'bg-orange-100' : ''}`}>
              {review.title}
            </span>
          )}
        </Combobox.Option>
      ))}
    </Combobox.Options>
  </Combobox>
</div>

Step 4: Interaction

The Combobox.Option component uses the render props pattern, allowing us to conditionally apply styles based on the active state. This enhances usability by highlighting the option the user hovers over or navigates to with the keyboard.

Conclusion

By rendering the Combobox component client-side and applying thoughtful styling, we've created a responsive and interactive SearchBox. This approach not only resolves server-side rendering issues but also provides a solid foundation for further customization and enhancement. As you continue to refine your applications, consider how these techniques can improve both functionality and user experience.