use stick to bottom

useStickToBottom

Dirancang dengan mempertimbangkan bot obrolan AI, mendukung bolt.new oleh StackBlitz

React hook + Component ringan tanpa ketergantungan yang secara otomatis menempel di bagian bawah wadah dan menganimasikan konten dengan lancar untuk mempertahankan posisi visualnya di layar saat konten baru ditambahkan.

Fitur

• Tidak memerlukan dukungan CSS tingkat browser overflow-anchor yang tidak didukung Safari.
• Dapat dihubungkan ke komponen apa pun yang ada menggunakan pengait dengan referensi. Atau cukup gunakan komponen yang disediakan, yang menangani referensi untuk Anda dan menyediakan konteks - sehingga komponen anak dapat memeriksa isAtBottom & menggulir ke bawah secara terprogram.
• Menggunakan ResizeObserver API yang modern namun didukung dengan baik untuk mendeteksi kapan konten diubah ukurannya.
  • Mendukung penyusutan konten tanpa kehilangan kelengketannya - tidak hanya bertambah tinggi.
• Menangani Scroll Anchoring dengan benar. Di sinilah ketika konten di atas area pandang diubah ukurannya, hal ini tidak menyebabkan konten yang saat ini ditampilkan di area pandang melompat ke atas atau ke bawah.
• Memungkinkan pengguna untuk membatalkan kelekatan kapan saja dengan menggulir ke atas.
  • Logika cerdas membedakan pengguna yang menggulir dari peristiwa gulir animasi khusus (tanpa melakukan debouncing apa pun yang dapat menyebabkan beberapa peristiwa terlewatkan).
  • Perangkat seluler juga berfungsi baik dengan logika ini.
• Menggunakan algoritme pengguliran halus yang diterapkan secara khusus, menampilkan animasi pegas berbasis kecepatan (dengan parameter yang dapat dikonfigurasi).
  • Pustaka lain menggunakan fungsi easing dengan durasi, tetapi fungsi ini tidak berfungsi dengan baik saat Anda ingin melakukan streaming konten baru dengan ukuran variabel - yang umum terjadi pada kasus penggunaan chatbot AI.
  • scrollToBottom mengembalikan Promise yang akan berubah menjadi true segera setelah pengguliran berhasil, atau false jika pengguliran dibatalkan.

Penggunaan

Komponen

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