Created
November 13, 2023 09:13
-
-
Save nimone/c2a86eb3f8b0baae619e23635c741107 to your computer and use it in GitHub Desktop.
A Modal Component with ReactJS and TailwindCSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState } from "react" | |
import Modal from "./components/Modal" | |
import Trash from "./icons/Trash" | |
export default function App() { | |
const [open, setOpen] = useState(false) | |
return ( | |
<main className="App"> | |
<button className="btn btn-danger" onClick={() => setOpen(true)}> | |
<Trash /> Delete | |
</button> | |
<Modal open={open} onClose={() => setOpen(false)}> | |
<div className="text-center w-56"> | |
<Trash size={56} className="mx-auto text-red-500" /> | |
<div className="mx-auto my-4 w-48"> | |
<h3 className="text-lg font-black text-gray-800">Confirm Delete</h3> | |
<p className="text-sm text-gray-500"> | |
Are you sure you want to delete this item? | |
</p> | |
</div> | |
<div className="flex gap-4"> | |
<button className="btn btn-danger w-full">Delete</button> | |
<button | |
className="btn btn-light w-full" | |
onClick={() => setOpen(false)} | |
> | |
Cancel | |
</button> | |
</div> | |
</div> | |
</Modal> | |
</main> | |
) | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { X } from "react-feather" | |
export default function Modal({ open, onClose, children }) { | |
return ( | |
// backdrop | |
<div | |
onClick={onClose} | |
className={` | |
fixed inset-0 flex justify-center items-center transition-colors | |
${open ? "visible bg-black/20" : "invisible"} | |
`} | |
> | |
{/* modal */} | |
<div | |
onClick={(e) => e.stopPropagation()} | |
className={` | |
bg-white rounded-xl shadow p-6 transition-all | |
${open ? "scale-100 opacity-100" : "scale-125 opacity-0"} | |
`} | |
> | |
<button | |
onClick={onClose} | |
className="absolute top-2 right-2 p-1 rounded-lg text-gray-400 bg-white hover:bg-gray-50 hover:text-gray-600" | |
> | |
<X /> | |
</button> | |
{children} | |
</div> | |
</div> | |
) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
its perfect
how to disable background scroll in this modal