skills.rest
petyosi
petyosiCOMMUNITY
Explore all skills by this author →
𝕏@petyosiGitHub

message-list

Render large chat histories virtually in React with position-preserving scroll control.

6.4k|353|Updated May 3, 2019
Search Tags:#messaging#react#license#virtualization#imperative-api#scroll-management
One-click install
npx skills add https://github.com/petyosi/react-virtuoso --skill message-list
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: message-list
Source: https://github.com/petyosi/react-virtuoso/tree/main/plugins/virtuoso-skills/skills/message-list
Command: npx skills add https://github.com/petyosi/react-virtuoso --skill message-list

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Rendering long chat histories in React can lead to sluggish performance and jank as the DOM grows. VirtuosoMessageList provides a highly-optimized virtualized list that renders only items currently in view and offers robust scroll management to preserve the user’s position during updates.

Core Features & Use Cases

  • Virtualized rendering for long conversations, eliminating the need to measure every item.
  • Declarative scroll control via the data prop, with optional smooth or instant transitions.
  • Imperative data API (append, prepend, map, notifyItemsChanged) for dynamic message updates.
  • Flexible slots and context (Header, Footer, StickyHeader, StickyFooter, EmptyPlaceholder) for custom chat UIs.
  • Suitable for chat interfaces, AI conversations, and multi-channel messaging with streaming and history loading.
  • Licensing wrapper required for production use.

Quick Start

Install the package, wrap your list with VirtuosoMessageListLicense using your license key, and supply an ItemContent renderer along with data.

Frequently Asked Questions about message-list

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render large chat histories in React without performance lag?▼

To render large chat histories in React without lag, use a virtualized list that only renders items currently in view. This approach eliminates DOM bloat and preserves smooth scrolling during dynamic message updates.

How do I preserve scroll position when appending new messages to a chat UI?▼

To preserve scroll position when appending new messages, use a virtualized list with declarative scroll control via the data prop. It maintains the user’s exact viewport location during dynamic updates, prepends, or streaming.

Can I dynamically append and prepend messages to a virtualized React list?▼

Yes, you can dynamically append and prepend messages to a virtualized React list using an imperative data API. This allows direct manipulation of chat history through methods like append, prepend, map, and notifyItemsChanged.

Does rendering a chat interface in React require measuring every message item?▼

No, rendering a chat interface in React does not require measuring every message item. A highly-optimized virtualized list handles rendering only visible items, eliminating the need to measure every item and preventing sluggish performance.

Do I need a license to use a virtualized message list in production?▼

Yes, you need a license to use a virtualized message list in production. The implementation requires wrapping your list with a licensing wrapper component using your specific license key before deploying the chat UI.

Related Skills

Explore More Software Engineering Skills→
abdulahad139abdulahad139

configure-chatkit

Configure OpenAI ChatKit in Next.js projects with Better Auth.

Community
Intermediate
verekiaverekia
31

verekia-architecture

Define Miniplex ECS architecture separating systems and views for R3F games.

Community
Intermediate
liamtran96liamtran96

tailwindcss

Apply utility classes to style web interfaces across React, Vue, Svelte, and HTML.

Community
Intermediate
janpeterdjanpeterd

tanstack-virtual

Virtualize viewport-visible items in large React lists with TanStack Virtual.

Community
Intermediate