react-spring-bottom-sheet

"react-spring-bottom-sheet"이라는 이름에서 짐작할 수 있듯이,
이 라이브러리는 React 애플리케이션에서 사용할 수 있는 Bottom Sheet를 만들기 위해
react-spring 애니메이션 라이브러리를 기반으로 사용자에게 제공합니다.

Bottom Sheet는 화면의 하단에서 위로 나오는 패턴을 따르며,
사용자에게 추가 정보나 다양한 작업을 수행할 수 있는 인터페이스를 제공합니다.

라이브러리의 사용법이나 구체적인 내용은 해당 라이브러리의 공식 문서나 GitHub 저장소에서 확인하는 것이 좋습니다. 저장소에서 예제 코드, 설명, 사용법 등을 찾을 수 있을 것입니다.
밑에서 설명하는 부분은 정말 기초적인 부분을 설명하고 있습니다.

기본적인 코드

import { useState } from 'react'
import { BottomSheet } from 'react-spring-bottom-sheet'

import 'react-spring-bottom-sheet/dist/style.css'

export default function Example() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <button onClick={() => setOpen(true)}>Open</button>
      <BottomSheet open={open}>My awesome content here</BottomSheet>
    </>
  )
}

시작하기에 앞서 import { BottomSheet } from 'react-spring-bottom-sheet'
로 BottomSheet 을 불러와서 적용해야 합니다.

open={open}

open은 불리언(boolean) 타입의 프로퍼티로,
Bottom Sheet의 열림 또는 닫힘 상태를 제어하는 데 사용됩니다.
이 프로퍼티는 컨트롤되며, 만약 open을 false로 설정하지 않으면 Bottom Sheet를 닫을 수 없습니다.

이렇게 open 버튼을 클릭하면 true 로 활성화 하면서 밑에서 BottomSheet 가 올라옵니다.

추가적으로 들어가면 좋은 기능들

snapPoints

snapPoints={({ minHeight, maxHeight }) => [minHeight, maxHeight * 0.6]}

snapPoints 는 BottomSheet 의 최소 높이, 최대 높이를 정할 수 있는 기능입니다.
minHeight 는 기본값이 위에 사진처럼 스크롤 할수 있는 박스 높이에 해당하고
maxHeight 는 기본값이 100vh 이기 때문에 그에 맞춰서 값을 조정하면 됩니다.

blocking

blocking 은 불리언(boolean) 타입의 프로퍼티로,
기본적으로 true 로 되어 있습니다.
Bottom Sheet 외부로 탭 이동을 차단하여 배경밖으로 나가지 못하게 합니다.

onDismiss

기본적으로 blocking 을 false 로 하지 않는다면 bottomSheet 를 생성했을때 bottomSheet 외에 화면을 클릭해도 bottomSheet 는 없어지지 않습니다.
onDismiss 는 blocking 이 true 일때 bottomSheet 외에 화면을 클릭하면 bottomSheet 가
닫히는 기능을 도와줍니다.

1. ESC 키를 누름: 사용자가 키보드의 ESC 키를 누르면 호출됩니다.
2. 배경을 탭함: 사용자가 시트의 배경을 탭하면 호출됩니다.
3. 시트를 뷰포트 아래로 스와이프함: 사용자가 시트를 뷰포트 아래로 스와이프하면 호출됩니다.

import { useState } from 'react'
import { BottomSheet } from 'react-spring-bottom-sheet'

import 'react-spring-bottom-sheet/dist/style.css'

export default function Test() {
  const [open, setOpen] = useState(false)

  const handleDismiss = () => {
    setOpen(false)
  }
  return (
    <>
      <button onClick={() => setOpen(!open)}>Open</button>
      <BottomSheet 
        open={open}
        snapPoints={({ minHeight, maxHeight }) => [minHeight, maxHeight * 0.3]}
        onDismiss={handleDismiss}
      >
        My awesome content here
      </BottomSheet>
    </>
  )
}