portal-dropdown-components
Build React Portal-based dropdown, modal, and overlay components. Use when creating dropdown menus, select components, modals, tooltips, or any UI that needs to escape overflow containers. Includes positioning, scroll handling, keyboard navigation, and accessibility patterns.
When & Why to Use This Skill
This Claude skill enables developers to build high-quality React Portal-based components, including dropdowns, modals, and overlays. It addresses critical UI challenges such as escaping overflow containers, managing z-index stacking contexts, and implementing complex positioning logic, all while maintaining strict accessibility standards and keyboard navigation patterns.
Use Cases
- Case 1: Resolving UI clipping issues where dropdown menus or tooltips are hidden by parent containers with 'overflow: hidden' or 'overflow: auto' properties.
- Case 2: Implementing accessible modal dialogs with focus trapping and ESC-key-to-close functionality to meet modern web accessibility (A11y) standards.
- Case 3: Creating dynamic overlays that require precise coordinate-based positioning and real-time updates during window resizing or container scrolling.
- Case 4: Managing complex z-index stacking contexts by rendering UI elements at the root of the DOM tree to ensure they always appear above other content.
| name | portal-dropdown-components |
|---|---|
| description | Build React Portal-based dropdown, modal, and overlay components. Use when creating dropdown menus, select components, modals, tooltips, or any UI that needs to escape overflow containers. Includes positioning, scroll handling, keyboard navigation, and accessibility patterns. |
Portal Dropdown Components
React Portal 기반 드롭다운, 모달, 오버레이 컴포넌트 개발 스킬입니다.
Quick Reference
Portal 기본 패턴
import { createPortal } from 'react-dom';
function Dropdown({ isOpen, position, children }) {
if (!isOpen) return null;
return createPortal(
<div style={{ position: 'fixed', ...position }}>
{children}
</div>,
document.body
);
}
핵심 기능
- ✅
position: fixed+ 화면 좌표 계산 - ✅ 외부 클릭 감지 (Click Outside)
- ✅ ESC 키 닫기
- ✅ 스크롤 시 위치 업데이트
- ✅ 포커스 트랩 (모달)
Contents
- reference.md - Portal 아키텍처 및 포지셔닝 가이드
- guide.md - 접근성 및 키보드 네비게이션 패턴
- scripts/generate_dropdown.sh - 드롭다운 컴포넌트 템플릿 생성
When to Use
- 드롭다운 메뉴가
overflow: hidden컨테이너에 잘리는 경우 - z-index 스태킹 컨텍스트 문제 해결 시
- 스크롤 가능한 컨테이너 내 드롭다운 구현 시
- 접근성 요구사항을 충족하는 UI 컴포넌트 개발 시