Popover
is a common UI element
in web applications, providing a way to display additional information or options when interacting with a particular element. With React
and TailwindCSS
, most of the time developers use an npm library
for the Popover
or Popover
. You know, when we use an npm library, it increases the project build sizes
.
In this article, I will create a reusable Popover component
using Tailwind CSS
. We will use click
and hover
triggers for the Popover.
The Popover component:
// @flow strict
"use client"
import { useEffect, useRef, useState } from "react";
function ReactPopover({
children,
content,
trigger = "click"
}) {
const [show, setShow] = useState(false);
const wrapperRef = useRef(null);
const handleMouseOver = () => {
if (trigger === "hover") {
setShow(true);
};
};
const handleMouseLeft = () => {
if (trigger === "hover") {
setShow(false);
};
};
useEffect(() => {
function handleClickOutside(event) {
if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
setShow(false);
}
}
if (show) {
// Bind the event listener
document.addEventListener("mousedown", handleClickOutside);
return () => {
// Unbind the event listener on clean up
document.removeEventListener("mousedown", handleClickOutside);
};
}
}, [show, wrapperRef]);
return (
<div
ref={wrapperRef}
onMouseEnter={handleMouseOver}
onMouseLeave={handleMouseLeft}
className="w-fit h-fit relative flex justify-center">
<div
onClick={() => setShow(!show)}
>
{children}
</div>
<div
hidden={!show}
className="min-w-fit w-[200px] h-fit absolute bottom-[100%] z-50 transition-all">
<div className="rounded bg-white p-3 shadow-[10px_30px_150px_rgba(46,38,92,0.25)] mb-[10px]">
{content}
</div>
</div>
</div>
);
};
export default ReactPopover;
In this component the trigger
default value is click
and you can pass hover
as an attribute. When you click outside of the Popover
, the Popover will be closed.
Use the Popover component:
import ReactPopover from "@/components/common/react-popover";
const Page = () => {
return (
<div className="w-screen h-screen flex justify-center items-center gap-4">
<ReactPopover
content={
<p>This Content Will be render in Popover.</p>
}
>
<button className="bg-indigo-500 px-4 py-1.5 border rounded text-white">
Click me
</button>
</ReactPopover>
<ReactPopover
trigger="hover"
content={
<p>This Content Will be render in Popover.</p>
}
>
<button className="bg-indigo-500 px-4 py-1.5 border rounded text-white">
Hover me
</button>
</ReactPopover>
</div>
);
};
export default Page;
Top comments (1)
I think it's a better title is "How to create a Popover using React and Tailwind CSS."