MessageScroller

A scroll container for a conversation.

MessageScrollerProps packages/core/src/chat-controls.ts:135 ↗

Import

import { MessageScroller } from "@tarve/core";

Usage

MessageScroller.tsx

import { Bubble, MessageScroller, Text } from "@tarve/core";

<MessageScroller height={360} gap={12}>
  {Array.from({ length: 20 }, (_, index) => (
    <Bubble key={index} side={index % 2 ? "outgoing" : "incoming"}>
      <Text>Message {index + 1}</Text>
    </Bubble>
  ))}
</MessageScroller>

Props

Prop	Type	Default
`gap`	`number`	`12`
`height`	`number`	`360`
`onScroll`	`(offset: number, max: number) => void`	—

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle