draggable ui npm package

모바일, PC에서 draggable layer UI를 구현했습니다. 

animation plugin을 사용해서 자체적으로 구현을 할까 고민했지만 npm 패키지를 커스텀을 했습니다.

react-spring-bottom-sheet

https://www.npmjs.com/package/react-spring-bottom-sheet

 

options

open: 열기/ 닫기 Boolean 값

onDismiss: layer닫는경우 실행될 콜백함수 

snapPoints: 드래그 했을 때 멈추는 포인트 

blocking: aria-hidden 기능 설정, default는 true

scrollLocking: 페이지 스크롤 막기

 

정리한거 말고도 많은 옵션들이 있다. 

 

스타일 커스텀 

root에 선언 된 css 변수 오버라이드 하기

:root {
  --rsbs-bg: #fff;
  --rsbs-handle-bg: #d9d9d9;
  --rsbs-overlay-rounded: 8px;
}