use stick to bottom

useStickToBottom

StackBlitz의 bolt.new 지원하는 AI 채팅 봇을 염두에 두고 설계됨

컨테이너 바닥에 자동으로 고정되고 콘텐츠에 부드럽게 애니메이션을 적용하여 새 콘텐츠가 추가되는 동안 화면의 시각적 위치를 유지하는 경량 의 종속성이 없는 React 후크 + 구성 요소입니다.

특징

• Safari가 지원하지 않는 overflow-anchor 브라우저 수준 CSS 지원이 필요하지 않습니다.
• 참조가 있는 후크를 사용하여 기존 구성 요소에 연결할 수 있습니다. 또는 참조를 처리하고 컨텍스트를 제공하는 제공된 구성 요소를 사용하면 하위 구성 요소가 isAtBottom 확인하고 프로그래밍 방식으로 아래쪽으로 스크롤할 수 있습니다.
• 현대적이면서도 잘 지원되는 ResizeObserver API를 사용하여 콘텐츠 크기가 조정되는 시기를 감지합니다.
  • 단순히 키만 커지는 것이 아니라 접착력을 잃지 않으면서 콘텐츠 축소를 지원합니다.
• 스크롤 앵커링을 올바르게 처리합니다. 이는 뷰포트 위의 콘텐츠 크기가 조정될 때 현재 뷰포트에 표시된 콘텐츠가 위나 아래로 이동하지 않는 곳입니다.
• 사용자가 언제든지 위로 스크롤하여 고정성을 취소할 수 있습니다.
  • 영리한 논리는 사용자 스크롤을 사용자 정의 애니메이션 스크롤 이벤트와 구별합니다(일부 이벤트를 놓칠 수 있는 디바운싱을 수행하지 않음).
  • 모바일 장치도 이 논리와 잘 작동합니다.
• 속도 기반 스프링 애니메이션(구성 가능한 매개변수 포함)을 특징으로 하는 사용자 정의 구현 부드러운 스크롤 알고리즘을 사용합니다.
  • 다른 라이브러리는 기간이 포함된 여유 기능을 대신 사용하지만 AI 챗봇 사용 사례에서 일반적으로 발생하는 가변 크기로 새 콘텐츠를 스트리밍하려는 경우에는 제대로 작동하지 않습니다.
  • scrollToBottom 스크롤이 성공하자마자 true 로 확인되고, 스크롤이 취소되면 false 로 확인되는 Promise<boolean> 을 반환합니다.

용법

<StickToBottom> 구성요소

 import { StickToBottom , useStickToBottomContext } from 'use-stick-to-bottom' ;

function Chat ( ) {
  return (
    < StickToBottom className = "h-[50vh] relative" resize = "smooth" initial = "smooth" >
      < StickToBottom . Content className = "flex flex-col gap-4" >
        { messages . map ( ( message ) => (
          < Message key = { message . id } message = { message } / >
        ) ) }
      < / StickToBottom . Content >

      < ScrollToBottom / >

      { /* This component uses `useStickToBottomContext` to scroll to bottom when the user enters a message */ }
      < ChatBox / >
    < / StickToBottom >
  ) ;
}

function ScrollToBottom ( ) {
  const { isAtBottom , scrollToBottom } = useStickToBottomContext ( ) ;

  return (
    ! isAtBottom && (
      < button
        className = "absolute i-ph-arrow-circle-down-fill text-4xl rounded-lg left-[50%] translate-x-[-50%] bottom-0"
        onClick = { ( ) => scrollToBottom ( ) }
      / >
    )
  ) ;
} 

useStickToBottom 후크

 import { useStickToBottom } from 'use-stick-to-bottom' ;

function Component ( ) {
  const { scrollRef , contentRef } = useStickToBottom ( ) ;

  return (
    < div style = { { overflow : 'auto' } } ref = { scrollRef } >
      < div ref = { contentRef } >
        { messages . map ( ( message ) => (
          < Message key = { message . id } message = { message } / >
        ) ) }
      < / div >
    < / div >
  ) ;
}