Comparing Dropdown Implementations in React: useState vs. Tailwind CSS Hover

Let's compare the two components, UseStateDropDown and HoverDropDown, and discuss the use of peer, onClick, and useState.

UseStateDropDown:

const UseStateDropDown = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="max-w-md mx-auto my-8 text-center">
      <h2 className="text-2xl font-bold mb-4">UseState DropDown</h2>
      <div className="relative block">
        <div
          onClick={() => setIsOpen(!isOpen)}
          className="cursor-pointer border border-gray-300 py-2 px-4 rounded bg-gray-200 hover:bg-gray-300"
        >
          Click here
        </div>
        {isOpen && (
          <div className="mt-2 border border-gray-300 rounded bg-white shadow p-4 absolute right-0 z-10">
            <p>This is the dropdown created using React useState</p>
          </div>
        )}
      </div>
    </div>
  );
};

HoverDropDown:

const HoverDropDown = () => {
  return (
    <div className="max-w-md mx-auto my-8 text-center">
      <h2 className="text-2xl font-bold mb-4">Hover DropDown</h2>
      <div className="relative block">
        <div
          className="cursor-pointer border border-gray-300 py-2 px-4 rounded bg-gray-200 hover:bg-gray-300 peer"
        >
          Click here
        </div>
        <div className="mt-2 hidden border border-gray-300 rounded bg-white shadow p-4 absolute right-0 z-10 peer-hover:block">
          <p>This is the dropdown created using React useState</p>
        </div>
      </div>
    </div>
  );
};

Comparison:

1. Trigger Mechanism:

• UseStateDropDown: Dropdown opens/closes on the onClick event of the trigger.
• HoverDropDown: Dropdown opens on hover and closes when the mouse leaves the trigger area (peer-hover:block).

2. State Management:

• UseStateDropDown: Uses the useState hook to manage the state of the dropdown (open/closed).
• HoverDropDown: Relies on Tailwind CSS's peer and peer-hover classes for managing the hover state of the dropdown.

3. Visibility Toggle:

• UseStateDropDown: Visibility of the dropdown is toggled based on the state (isOpen).
• HoverDropDown: Visibility of the dropdown is controlled by Tailwind CSS's peer-hover:block class.

4. Styling:

• Both components have similar styling for the trigger and the dropdown content.
• peer and peer-hover classes in HoverDropDown help in managing the hover effect without the need for additional state.

5. Flexibility:

• UseStateDropDown: More flexible in terms of handling complex state logic or additional functionality triggered by clicks.
• HoverDropDown: Simplifies state management with Tailwind CSS utilities, which can be beneficial for simpler interactions.

Choose between the two based on your specific use case and the desired user interaction. If you prefer a hover-based approach with simplified state management, the HoverDropDown may be more suitable. If you need more control over the dropdown's behavior, the UseStateDropDown approach might be preferred.

Get full code: github repository

Comments

[Murphie1]

Hi, I was wondering if you could configure next/font to Babel on your project manually. Or if you could change the default font from next/font to something else manually?

[Jithesh]

You can change default font in layout.js file (this is next js). Or You can select desirable font and import in css file and set the font family. I think is the way.
Sorry for very late reply. I didn't know anyone will find this article useful.
Thank you for reading article.