use stick to bottom

useStickToBottom

Entwickelt mit Blick auf KI-Chatbots, bolt.new von StackBlitz unterstützen

Ein leichter , unabhängiger React-Hook + -Komponente, der automatisch am Boden des Containers haftet und den Inhalt reibungslos animiert, um seine visuelle Position auf dem Bildschirm beizubehalten, während neuer Inhalt hinzugefügt wird.

Merkmale

• Erfordert keine overflow-anchor -CSS-Unterstützung auf Browserebene, die Safari nicht unterstützt.
• Kann über einen Haken mit Refs an jedes vorhandene Bauteil angeschlossen werden. Oder verwenden Sie einfach die bereitgestellte Komponente, die die Referenzen für Sie verarbeitet und Kontext bereitstellt – so können untergeordnete Komponenten isAtBottom überprüfen und programmgesteuert nach unten scrollen.
• Verwendet die moderne, aber gut unterstützte ResizeObserver -API, um zu erkennen, wenn sich die Größe von Inhalten ändert.
  • Unterstützt das Verkleinern von Inhalten, ohne die Klebrigkeit zu verlieren – und nicht nur, dass sie größer werden.
• Behandelt die Bildlaufverankerung korrekt. Wenn die Größe des Inhalts über dem Ansichtsfenster geändert wird, führt dies nicht dazu, dass der aktuell im Ansichtsfenster angezeigte Inhalt nach oben oder unten springt.
• Ermöglicht dem Benutzer, die Klebrigkeit jederzeit abzubrechen, indem er nach oben scrollt.
  • Eine clevere Logik unterscheidet das Scrollen des Benutzers von den Scroll-Ereignissen der benutzerdefinierten Animation (ohne eine Entprellung durchzuführen, die dazu führen könnte, dass einige Ereignisse übersehen werden).
  • Auch mobile Geräte funktionieren gut mit dieser Logik.
• Verwendet einen individuell implementierten Smooth-Scrolling-Algorithmus mit geschwindigkeitsbasierten Federanimationen (mit konfigurierbaren Parametern).
  • Andere Bibliotheken verwenden stattdessen Beschleunigungsfunktionen mit Dauer, diese funktionieren jedoch nicht gut, wenn Sie neue Inhalte mit variabler Größe streamen möchten – was bei KI-Chatbot-Anwendungsfällen üblich ist.
  • scrollToBottom gibt ein Promise<boolean> zurück, das zu true aufgelöst wird, sobald der Bildlauf erfolgreich war, oder zu false wenn der Bildlauf abgebrochen wurde.

Verwendung

<StickToBottom> -Komponente

 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 Haken

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