import { useEffect } from 'react'; /** * Custom hook that detects clicks outside of a specified element. * * @param {React.RefObject} ref - Ref object pointing to the element to monitor. * @param {Function} handler - Function to call when a click outside is detected. * @param {string} [eventType='mousedown'] - The event type to listen for (e.g., 'mousedown', 'click'). */ function useClickOutside(ref, handler, eventType = 'mousedown') { useEffect(() => { const listener = (event) => { // Do nothing if clicking ref's element or descendent elements if (!ref.current || ref.current.contains(event.target)) { return; } handler(event); }; const touchListener = (event) => { // Do nothing if touching ref's element or descendent elements if (!ref.current || ref.current.contains(event.target)) { return; } handler(event); }; document.addEventListener(eventType, listener); document.addEventListener('touchstart', touchListener); // Handle touch events separately return () => { document.removeEventListener(eventType, listener); document.removeEventListener('touchstart', touchListener); }; }, [ref, handler, eventType]); // Re-run effect if ref, handler, or eventType changes } export default useClickOutside; import React, { useState, useRef } from 'react'; import useClickOutside from '../hooks/useClickOutside'; import './Dropdown.css'; const Dropdown = ({ options, placeholder = "Select an option" }) => { const [isOpen, setIsOpen] = useState(false); const [selectedOption, setSelectedOption] = useState(null); const dropdownRef = useRef(null); // Close dropdown when clicking outside useClickOutside(dropdownRef, () => { if (isOpen) { setIsOpen(false); } }); const toggleDropdown = () => { setIsOpen(!isOpen); }; const handleOptionClick = (option) => { setSelectedOption(option); setIsOpen(false); // Optional: Add a callback prop to notify parent of selection // if (onSelect) onSelect(option); }; return (

{isOpen && ( )}

); }; export default Dropdown; .dropdown-container { position: relative; display: inline-block; font-family: sans-serif; min-width: 200px; /* Adjust as needed */ } .dropdown-button { padding: 10px 15px; background-color: #ffffff; color: #333; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; font-size: 16px; width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; transition: border-color 0.2s ease-in-out; } .dropdown-button:hover, .dropdown-button:focus { border-color: #888; outline: none; } .dropdown-arrow { display: inline-block; margin-left: 10px; transition: transform 0.2s ease-in-out; font-size: 0.8em; } .dropdown-arrow.open { transform: rotate(180deg); } .dropdown-menu { position: absolute; top: calc(100% + 5px); /* Position below the button with a small gap */ left: 0; right: 0; /* Make menu same width as button */ background-color: white; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); list-style: none; padding: 5px 0; margin: 0; max-height: 200px; /* Limit height and allow scrolling */ overflow-y: auto; z-index: 1000; /* Ensure menu is above other content */ } .dropdown-item { padding: 10px 15px; cursor: pointer; font-size: 16px; color: #333; white-space: nowrap; /* Prevent text wrapping */ } .dropdown-item:hover, .dropdown-item:focus { background-color: #f1f1f1; outline: none; } .dropdown-item[aria-selected="true"] { background-color: #e0e0e0; font-weight: bold; } import React from 'react'; import Dropdown from '../components/Dropdown'; import './DropdownPage.css'; const DropdownPage = () => { const dropdownOptions = [ { value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' }, { value: 'option3', label: 'A Slightly Longer Option 3' }, { value: 'option4', label: 'Option 4' }, ]; return (

Dropdown Menu Example

This page demonstrates a dropdown component that closes when you click outside of it.

Select an item: {/* Good practice for accessibility */} {/* The Dropdown component itself doesn't need an id if the label points to the button via other means, but wrapping helps associate them. The button inside Dropdown handles aria attributes. */}

Some Other Content

Clicking anywhere in this area, or on the background, should close the dropdown menu above.

); }; export default DropdownPage; .dropdown-page { padding: 30px; font-family: Arial, sans-serif; background-color: #f9f9f9; min-height: 100vh; } .dropdown-page h1 { text-align: center; color: #333; margin-bottom: 15px; } .dropdown-page > p { text-align: center; color: #666; margin-bottom: 40px; } .dropdown-wrapper { max-width: 300px; margin: 0 auto 40px auto; /* Center the dropdown */ display: flex; flex-direction: column; gap: 8px; /* Space between label and dropdown */ } .dropdown-wrapper label { font-weight: bold; color: #555; font-size: 0.9em; } .other-content { margin-top: 50px; padding: 20px; border: 1px dashed #ccc; background-color: #fff; border-radius: 5px; } .other-content h2 { margin-top: 0; color: #444; } .other-content button { padding: 8px 12px; margin-top: 15px; cursor: pointer; background-color: #e0e0e0; border: 1px solid #bbb; border-radius: 4px; } .other-content button:hover { background-color: #d0d0d0; } import React from 'react'; import DropdownPage from './pages/DropdownPage'; import './App.css'; // Keep minimal global styles if needed function App() { return (

); } export default App; /* Minimal App.css - most styles are component/page specific */ .app-container { /* You might add global layout constraints here if needed */ } import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import './index.css'; // Global base styles const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #f9f9f9; /* Match page background or set a base */ } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } /* Basic reset */ *, *::before, *::after { box-sizing: border-box; }