- Below is an example of how you can create a simple modal using Tailwind CSS and React. This example does not require any external packages or libraries. The modal visibility is controlled by a React state, which toggles between true and false.
- First, ensure you have Tailwind CSS set up in your React project. If it's not set up yet, you can follow the installation guide on the Tailwind CSS official documentation.
- Here's the React component code for the modal:
import React, { useState, useEffect } from 'react';
const Modal = ({ isOpen, onClose }) => {
const handleOverlayClick = (e) => {
if (e.target.id === "modalOverlay") {
onClose();
}
};
useEffect(() => {
// Optional: Trap focus inside modal for better accessibility
const handleKeyDown = (event) => {
if (event.key === 'Escape') {
onClose();
}
};
document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
}, [onClose]);
if (!isOpen) return null;
return (
<div id="modalOverlay" className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center" onClick={handleOverlayClick}>
<div className="bg-white p-4 rounded-lg shadow-lg" onClick={(e) => e.stopPropagation()}>
<h2 className="text-lg font-semibold">Modal Title</h2>
<p className="mt-2">This is a simple modal example using Tailwind CSS and React.</p>
<button onClick={onClose} className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-150">
Close
</button>
</div>
</div>
);
};
const App = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const toggleModal = () => setIsModalOpen(!isModalOpen);
return (
<div className="p-4">
<button onClick={toggleModal} className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-700 transition duration-150">
Toggle Modal
</button>
<Modal isOpen={isModalOpen} onClose={toggleModal} />
</div>
);
};
export default App;
- App component: This is the main component where a button is used to toggle the modal's visibility. The isModalOpen state controls the visibility of the modal.
- Modal component: This component represents the modal itself. It receives isOpen as a prop to control its visibility and onClose as a callback to close the modal. The modal structure is styled with Tailwind CSS for layout, background, padding, margin, colors, etc. It will not render anything if isOpen is false.
- Tailwind CSS classes are used for styling. The modal background (fixed inset-0 bg-black bg-opacity-50) creates a semi-transparent overlay. The modal content (bg-white p-4 rounded-lg shadow-lg) is styled to appear distinct against the overlay.
- Overlay Click Detection: The handleOverlayClick function checks if the clicked element has the id "modalOverlay", which is assigned to the overlay div. This ensures that the onClose function is called only when the overlay (not the modal content) is clicked.
- Stop Propagation Inside Modal: Added onClick={(e) => e.stopPropagation()} to the modal content div. This prevents clicks inside the modal from propagating to the overlay, thus avoiding unintentional closing of the modal when interacting with its content.
- Close on Escape Key: An useEffect hook with a handleKeyDown function is added to listen for the Escape key press to close the modal for better accessibility.
- This setup assumes you have Tailwind CSS properly configured in your project. If not, please refer to the Tailwind CSS blogs for setup instructions.
No comments:
Post a Comment