use stick to bottom

useStickToBottom

Conçu en pensant aux chatbots IA, alimentant bolt.new par StackBlitz

Un hook + composant React léger et sans dépendance qui colle automatiquement au bas du conteneur et anime en douceur le contenu pour conserver sa position visuelle à l'écran pendant que du nouveau contenu est ajouté.

Caractéristiques

• Ne nécessite pas la prise en charge CSS au niveau du navigateur overflow-anchor ce que Safari ne prend pas en charge.
• Peut être connecté à n’importe quel composant existant à l’aide d’un crochet avec références. Ou utilisez simplement le composant fourni, qui gère les références pour vous et fournit du contexte - afin que les composants enfants puissent vérifier isAtBottom et faire défiler par programme vers le bas.
• Utilise l'API ResizeObserver moderne mais bien prise en charge, pour détecter le redimensionnement du contenu.
  • Prend en charge la réduction du contenu sans perdre son adhérence – pas seulement en grandissant.
• Gère correctement l’ancrage du défilement. C'est là que lorsque le contenu au-dessus de la fenêtre est redimensionné, le contenu actuellement affiché dans la fenêtre ne saute pas vers le haut ou vers le bas.
• Permet à l'utilisateur d'annuler le caractère collant à tout moment en faisant défiler vers le haut.
  • Une logique intelligente distingue le défilement de l'utilisateur des événements de défilement d'animation personnalisés (sans effectuer d'anti-rebond qui pourrait faire manquer certains événements).
  • Les appareils mobiles fonctionnent également bien avec cette logique.
• Utilise un algorithme de défilement fluide mis en œuvre sur mesure, avec des animations à ressort basées sur la vitesse (avec des paramètres configurables).
  • D'autres bibliothèques utilisent à la place des fonctions d'assouplissement avec des durées, mais celles-ci ne fonctionnent pas bien lorsque vous souhaitez diffuser du nouveau contenu avec une taille variable - ce qui est courant pour les cas d'utilisation de chatbot IA.
  • scrollToBottom renvoie une Promise qui sera résolue à true dès que le défilement a réussi, ou false si le défilement a été annulé.

Usage

Composant

{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 le crochet 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 >
  ) ;
}