--- name: advanced-ui-patterns description: Advanced patterns like infinite scroll, drag-and-drop, virtualization, modals, portals, toast notifications, and complex interactions. Use when implementing advanced UI features, optimizing long lists, or creating rich interactions. --- # Advanced UI Patterns Implement sophisticated user interface patterns. ## 1. Infinite Scroll ```typescript import { useInfiniteQuery } from '@tanstack\/react-query'; import { useInView } from 'react-intersection-observer'; function InfiniteScroll() { const { ref, inView } = useInView(); const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({ queryKey: ['posts'], queryFn: ({ pageParam = 0 }) => fetchPosts(pageParam), getNextPageParam: (lastPage, pages) => lastPage.nextCursor }); useEffect(() => { if (inView && hasNextPage) { fetchNextPage(); } }, [inView, hasNextPage, fetchNextPage]); return (

{data?.pages.map(page => page.items.map(item => ) )}

{isFetchingNextPage ? 'Loading...' : hasNextPage ? 'Load More' : 'No more items'} <\/div> <\/div> ); } ``` ## 2. Virtual Scrolling ```typescript import { useVirtualizer } from '@tanstack\/react-virtual'; function VirtualList({ items }: { items: any[] }) { const parentRef = useRef(null); const virtualizer = useVirtualizer({ count: items.length, getScrollElement: () => parentRef.current, estimateSize: () => 50, overscan: 5 }); return (

{virtualizer.getVirtualItems().map(virtualItem => (

<\/div> ))} <\/div> <\/div> ); } ``` ## 3. Drag and Drop ```typescript import { DndContext, useDraggable, useDroppable } from '@dnd-kit\/core'; function Draggable({ id, children }: { id: string; children: React.ReactNode }) { const { attributes, listeners, setNodeRef, transform } = useDraggable({ id }); const style = transform ? { transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`, } : undefined; return (

{children} <\/div> ); } function Droppable({ id, children }: { id: string; children: React.ReactNode }) { const { setNodeRef } = useDroppable({ id }); return

{children}<\/div>; } function DragDropExample() { const [items, setItems] = useState(['A', 'B', 'C']); const handleDragEnd = (event: any) => { const { active, over } = event; if (over && active.id !== over.id) { \/\/ Reorder items const oldIndex = items.indexOf(active.id); const newIndex = items.indexOf(over.id); const newItems = arrayMove(items, oldIndex, newIndex); setItems(newItems); } }; return ( {items.map(item => (

{item}<\/div> <\/Draggable> ))} <\/DndContext> ); } ``` ## 4. Modal \/ Dialog with Portal ```typescript import { createPortal } from 'react-dom'; function Modal({ isOpen, onClose, children }: ModalProps) { const modalRef = useRef(null); useEffect(() => { if (!isOpen) return; \/\/ Focus trap const handleKeyDown = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); if (e.key === 'Tab') { const focusable = modalRef.current?.querySelectorAll( 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' ); \/\/ Handle focus trap logic } }; document.addEventListener('keydown', handleKeyDown); document.body.style.overflow = 'hidden'; return () => { document.removeEventListener('keydown', handleKeyDown); document.body.style.overflow = ''; }; }, [isOpen, onClose]); if (!isOpen) return null; return createPortal(