use stick to bottom

useStickToBottom

Diseñado teniendo en cuenta los chatbots de IA, impulsando bolt.new por StackBlitz

Un gancho + componente React liviano y de dependencia cero que se adhiere automáticamente al fondo del contenedor y anima suavemente el contenido para mantener su posición visual en la pantalla mientras se agrega contenido nuevo.

Características

• No requiere compatibilidad con CSS a nivel de navegador overflow-anchor algo que Safari no admite.
• Se puede conectar a cualquier componente existente mediante un gancho con referencias. O simplemente use el componente proporcionado, que maneja las referencias por usted y proporciona contexto, para que los componentes secundarios puedan verificar isAtBottom y desplazarse hasta el final mediante programación.
• Utiliza la API ResizeObserver , moderna pero con buen soporte, para detectar cuándo cambia el tamaño del contenido.
  • Admite la reducción del contenido sin perder adherencia, no solo el aumento de altura.
• Maneja correctamente el anclaje de desplazamiento. Aquí es donde cuando el contenido encima de la ventana gráfica cambia de tamaño, no hace que el contenido que se muestra actualmente en la ventana gráfica salte hacia arriba o hacia abajo.
• Permite al usuario cancelar la adherencia en cualquier momento desplazándose hacia arriba.
  • La lógica inteligente distingue el desplazamiento del usuario de los eventos de desplazamiento de animación personalizados (sin realizar ningún rebote que pueda causar que se pierdan algunos eventos).
  • Los dispositivos móviles también funcionan bien con esta lógica.
• Utiliza un algoritmo de desplazamiento suave implementado personalizado, que presenta animaciones de resorte basadas en la velocidad (con parámetros configurables).
  • Otras bibliotecas utilizan funciones de aceleración con duraciones, pero no funcionan bien cuando se desea transmitir contenido nuevo con tamaño variable, lo cual es común en los casos de uso de chatbot de IA.
  • scrollToBottom devuelve una Promise que se resolverá en true tan pronto como el desplazamiento se haya realizado correctamente, o false si el desplazamiento se canceló.

Uso

Componente

{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 gancho StickToBottom

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