use stick to bottom

useStickToBottom

Разработано с учетом чат-ботов с искусственным интеллектом и используется для bolt.new от StackBlitz.

Легкий хук + компонент React с нулевой зависимостью , который автоматически прикрепляется к нижней части контейнера и плавно анимирует контент, сохраняя его визуальное положение на экране во время добавления нового контента.

Функции

• Не требует поддержки CSS на уровне браузера overflow-anchor , которую Safari не поддерживает.
• Может быть подключен к любому существующему компоненту с помощью хука со ссылками. Или просто используйте предоставленный компонент, который обрабатывает ссылки за вас и предоставляет контекст, чтобы дочерние компоненты могли проверять isAtBottom и программно прокручивать вниз.
• Использует современный, но хорошо поддерживаемый API ResizeObserver для определения изменения размера контента.
  • Поддерживает сжатие контента без потери липкости, а не просто увеличение высоты.
• Правильно обрабатывает привязку прокрутки. Здесь при изменении размера содержимого над областью просмотра содержимое, отображаемое в настоящее время в области просмотра, не подпрыгивает вверх или вниз.
• Позволяет пользователю отменить привязку в любое время, прокрутив вверх.
  • Умная логика отличает прокрутку пользователя от событий прокрутки пользовательской анимации (без каких-либо нарушений, которые могут привести к пропуску некоторых событий).
  • Мобильные устройства также хорошо работают с этой логикой.
• Использует реализованный на заказ алгоритм плавной прокрутки с пружинящей анимацией на основе скорости (с настраиваемыми параметрами).
  • Другие библиотеки вместо этого используют функции замедления с продолжительностью, но они не работают хорошо, когда вы хотите транслировать новый контент с переменным размером, что часто встречается в случаях использования чат-ботов с искусственным интеллектом.
  • scrollToBottom возвращает Promise , который принимает значение true , как только прокрутка прошла успешно, или false , если прокрутка была отменена.

Использование

Компонент

{messages.map((message) => ( ))} {/* This component uses `useStickToBottomContext` to scroll to bottom when the user enters a message */} ); } function ScrollToBottom() { const { isAtBottom, scrollToBottom } = useStickToBottomContext(); return ( !isAtBottom && ( scrollToBottom()} /> ) ); }">

 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 Hook

 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 >
  ) ;
}