Import
import { MessageScroller } from "@indoku/ui"Examples
Basic usage
Pesan #1 - scroll turun buat liat tombol "ke bawah" muncul.
Pesan #2 - scroll turun buat liat tombol "ke bawah" muncul.
Pesan #3 - scroll turun buat liat tombol "ke bawah" muncul.
Pesan #4 - scroll turun buat liat tombol "ke bawah" muncul.
Pesan #5 - scroll turun buat liat tombol "ke bawah" muncul.
Pesan #6 - scroll turun buat liat tombol "ke bawah" muncul.
Pesan #7 - scroll turun buat liat tombol "ke bawah" muncul.
Pesan #8 - scroll turun buat liat tombol "ke bawah" muncul.
Pesan #9 - scroll turun buat liat tombol "ke bawah" muncul.
Pesan #10 - scroll turun buat liat tombol "ke bawah" muncul.
Pesan #11 - scroll turun buat liat tombol "ke bawah" muncul.
Pesan #12 - scroll turun buat liat tombol "ke bawah" muncul.
Pesan #13 - scroll turun buat liat tombol "ke bawah" muncul.
Pesan #14 - scroll turun buat liat tombol "ke bawah" muncul.
Pesan #15 - scroll turun buat liat tombol "ke bawah" muncul.
Pesan #16 - scroll turun buat liat tombol "ke bawah" muncul.
Pesan #17 - scroll turun buat liat tombol "ke bawah" muncul.
Pesan #18 - scroll turun buat liat tombol "ke bawah" muncul.
Pesan #19 - scroll turun buat liat tombol "ke bawah" muncul.
Pesan #20 - scroll turun buat liat tombol "ke bawah" muncul.
function MessageScrollerDemo() { const rows = Array.from({ length: 20 }, (_, i) => i + 1) return ( <Card.Root h="64" overflow="hidden" position="relative"> <MessageScroller.Root p="4" watch={[]}> <Stack gap="2"> {rows.map((n) => ( <Text key={n} fontSize="sm" color="fg.muted"> Pesan #{n} - scroll turun buat liat tombol "ke bawah" muncul. </Text> ))} </Stack> </MessageScroller.Root> </Card.Root> )}Props
Root
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | – | |
threshold | number | 80 | Distance in px from the bottom that still counts as "at the bottom". |
watch | unknown[] | – | Dependency array. When it changes (e.g. message count or the last message while streaming) the scroller sticks to the bottom if the user was already there. |
* required. Style props and HTML attributes are accepted as well.
Created by @indokudev