Chat Viewer
    Preparing search index...

    Interface ChatViewerProps<M>

    Props for the ChatViewer component.

    interface ChatViewerProps<M extends IdentifiableMessage = IdentifiableMessage> {
        alignment?: ChatAlignment;
        className?: string;
        historyEndOffset?: number;
        keepMountedIds?: MessageId<M>[];
        keepMountedIndexes?: number[];
        messages: M[];
        onAtBottom?: ChatCallback<M>;
        onAtTop?: ChatCallback<M>;
        onHistoryEndReached?: ChatCallback<M>;
        onKeyDown?: KeyboardEventHandler;
        onNewerMessages?: OnMessagesCallback<M>;
        onOlderMessages?: OnMessagesCallback<M>;
        onPrefixDisplay?: OnAffixCallback<M>;
        onScroll?: (offset: number) => void;
        onScrollEnd?: () => void;
        onSuffixDisplay?: OnAffixCallback<M>;
        onWheel?: WheelEventHandler;
        overscan?: number;
        prefix?: ReactNode;
        renderMessage: (
            message: M,
        ) => null | ReactElement<unknown, string | JSXElementConstructor<any>>;
        scrollerClassName?: string;
        scrollerStyle?: CSSProperties;
        ssrCount?: number;
        style?: CSSProperties;
        suffix?: ReactNode;
    }

    Type Parameters

    Index

    Properties

    alignment? className? historyEndOffset? keepMountedIds? keepMountedIndexes? messages onAtBottom? onAtTop? onHistoryEndReached? onKeyDown? onNewerMessages? onOlderMessages? onPrefixDisplay? onScroll? onScrollEnd? onSuffixDisplay? onWheel? overscan? prefix? renderMessage scrollerClassName? scrollerStyle? ssrCount? style? suffix?

    Properties

    alignment?: ChatAlignment

    Alignment of the chat list. Determines whether new messages appear at the top or bottom.

    'bottom'
    className?: string

    Class name for the root element of the chat viewer.

    historyEndOffset?: number

    Offset in pixels from the end of the history at which to trigger onHistoryEndReached.

    10
    keepMountedIds?: MessageId<M>[]

    MessageIds of messages to keep mounted even when out of view.

    keepMountedIndexes?: number[]

    Indexes of messages to keep mounted even when out of view. This allows you to preserve the state of messages that are not currently visible.

    messages: M[]

    The array of messages to display in the chat viewer.

    onAtBottom?: ChatCallback<M>

    Callback fired when the viewport reaches the bottom of the message list.

    ChatViewerHandle instance. Allows you to control the chat viewer.

    onAtTop?: ChatCallback<M>

    Callback fired when the viewport reaches the top of the message list.

    ChatViewerHandle instance. Allows you to control the chat viewer.

    onHistoryEndReached?: ChatCallback<M>

    Callback fired when the user scrolls to the end of the history (top or bottom, depending on alignment).

    ChatViewerHandle instance. Allows you to control the chat viewer.

    onKeyDown?: KeyboardEventHandler

    Callback fired on key down events in the scrollable container.

    onNewerMessages?: OnMessagesCallback<M>

    Callback fired when newer messages are requested (e.g., user scrolls to the bottom).

    You might want to use this callback with utility functions like followEveryMessage, followMessagesAtBottom, or followMessagesBy to automatically scroll to automatically follow new messages.

    <ChatViewer
      messages={messages}
      renderMessage={renderMessage}
      onNewerMessages={followMessagesAtBottom()}
    />

    ChatViewerHandle instance. Allows you to control the chat viewer.

    The current messages.

    followMessagesAtBottom - scrolls to the bottom when viewport is at the bottom of the history.

    onOlderMessages?: OnMessagesCallback<M>

    Callback fired when older messages are requested (e.g., user scrolls to the top).

    ChatViewerHandle instance. Allows you to control the chat viewer.

    The current messages.

    onPrefixDisplay?: OnAffixCallback<M>

    Callback fired when the prefix node is displayed in the viewport.

    ChatViewerHandle instance. Allows you to control the chat viewer.

    Whether the prefix is displayed.

    onScroll?: (offset: number) => void

    Callback fired on scroll with the current scroll offset.

    Type declaration

      • (offset: number): void

      • Parameters

        • offset: number

          The current scroll offset.

        Returns void

    onScrollEnd?: () => void

    Callback fired when scrolling ends.

    onSuffixDisplay?: OnAffixCallback<M>

    Callback fired when the suffix node is displayed in the viewport.

    ChatViewerHandle instance. Allows you to control the chat viewer.

    Whether the suffix is displayed.

    followSuffixAtBottom - scrolls to the bottom when viewport when suffix is displayed at the bottom of the history.

    onWheel?: WheelEventHandler

    Callback fired on wheel events in the scrollable container.

    overscan?: number

    Number of extra items to render beyond the visible area (for virtualization performance). Passed to Virtua's overscan prop.

    https://github.com/inokawa/virtua/blob/main/docs/react/interfaces/VListProps.md#overscan

    prefix?: ReactNode

    React node to render before the message list (e.g., a header or history loader). It can be conditionally displayed. When changed, it will trigger a onPrefixDisplay callback.

    null
    renderMessage: (
        message: M,
    ) => null | ReactElement<unknown, string | JSXElementConstructor<any>>

    Function to render a message.

    Type declaration

      • (message: M): null | ReactElement<unknown, string | JSXElementConstructor<any>>

      • Parameters

        • message: M

          The message to render.

        Returns null | ReactElement<unknown, string | JSXElementConstructor<any>>

        A React element or null.

    scrollerClassName?: string

    Class name for the scrollable container.

    scrollerStyle?: CSSProperties

    Style for the scrollable container.

    ssrCount?: number

    Number of items to render on the server for SSR. Passed to Virtua's ssrCount prop.

    https://github.com/inokawa/virtua/blob/main/docs/react/interfaces/VListProps.md#ssrcount

    style?: CSSProperties

    Style for the root element of the chat viewer.

    suffix?: ReactNode

    React node to render after the message list (e.g., a footer or typing indicator). It can be conditionally displayed. When changed, it will trigger a onSuffixDisplay callback.

    null

    Settings

    Member Visibility

    On This Page

    Properties