floating-ui/floating-ui

개요 툴팁, 팝오버, 드롭다운 등 플로팅 요소의 위치를 정밀하게 제어하는 JavaScript 라이브러리다. 32,500+ stars를 보유한 Popper.js의 후계자로, 모든 JS 환경(브라우저, React, Vue, React Native 등)을 지원한다.

핵심 내용 앵커 요소를 기준으로 플로팅 요소의 최적 위치를 자동 계산한다. 뷰포트 경계를 감지해 넘치는 경우 자동으로 반대 방향으로 위치를 조정(flip)하고, 공간이 부족하면 이동(shift)시킨다. React, Vue, Svelte, React Native용 공식 어댑터를 제공한다.

기존 대비 차별점 기존 Popper.js 대비 번들 크기가 크게 줄었고, 트리 쉐이킹을 완전히 지원해 필요한 미들웨어만 import할 수 있다. DOM에 의존하지 않는 코어 덕분에 React Native, Canvas 등 비DOM 환경에서도 동작한다.

활용 가능성 커스텀 드롭다운, 컨텍스트 메뉴, 날짜 피커, 자동완성 UI, 툴팁 시스템 구현 시 위치 계산 로직을 직접 구현하지 않고 안정적으로 처리할 수 있다.

참고 자료 - 원본