use stick to bottom

useStickToBottom

Projetado com bots de bate-papo de IA em mente, alimentando bolt.new por StackBlitz

Um gancho + componente React leve e de dependência zero que adere automaticamente à parte inferior do contêiner e anima suavemente o conteúdo para manter sua posição visual na tela enquanto novo conteúdo é adicionado.

Características

• Não requer suporte CSS no nível do navegador overflow-anchor , que o Safari não suporta.
• Pode ser conectado a qualquer componente existente usando um gancho com refs. Ou simplesmente use o componente fornecido, que lida com as referências para você e fornece contexto - para que os componentes filhos possam verificar isAtBottom e rolar programaticamente até o final.
• Usa a API ResizeObserver moderna, mas bem suportada, para detectar quando o conteúdo é redimensionado.
  • Suporta a redução do conteúdo sem perder a aderência - não apenas ficando mais alto.
• Lida corretamente com a ancoragem de rolagem. É aqui que, quando o conteúdo acima da janela de visualização é redimensionado, não faz com que o conteúdo atualmente exibido na janela de visualização salte para cima ou para baixo.
• Permite ao usuário cancelar a aderência a qualquer momento rolando para cima.
  • A lógica inteligente distingue a rolagem do usuário dos eventos de rolagem da animação personalizada (sem fazer qualquer debounce que possa fazer com que alguns eventos sejam perdidos).
  • Os dispositivos móveis também funcionam bem com essa lógica.
• Usa um algoritmo de rolagem suave implementado de forma personalizada, apresentando animações de mola baseadas em velocidade (com parâmetros configuráveis).
  • Outras bibliotecas usam funções de easing com durações, mas elas não funcionam bem quando você deseja transmitir novo conteúdo com dimensionamento variável - o que é comum para casos de uso de chatbot de IA.
  • scrollToBottom retorna um Promise que será resolvido como true assim que a rolagem for bem-sucedida ou false se a rolagem for cancelada.

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

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