petyosi/react-virtuoso

petyosi 프로필

최근 기록된 소스 활동: 2026년 10월 1일 12:11

SkillsMP 카탈로그 업데이트: 2026년 10월 17일 00:09

수집된 skills: 5

GitHub 스타: 6,471
GitHub 포크: 358

저장소 README

README 원본 파일: README.md

README 원본 보기

README 전체 펼치기

# React Virtuoso [![NPM version](https://img.shields.io/npm/v/react-virtuoso.svg?style=flat)](//badge.fury.io/js/react-virtuoso) The most complete React virtualization rendering family of components. - Variable sized items out of the box; no manual measurements or hard-coding item heights is necessary; - [Chat message list UI](https://virtuoso.dev/message-list); - [Grouped mode with sticky headers](https://virtuoso.dev/react-virtuoso/grouped-virtuoso/grouped-by-first-letter); - [Responsive grid layout](https://virtuoso.dev/react-virtuoso/virtuoso-grid/grid-responsive-columns); - [Masonry layout](https://virtuoso.dev/masonry); - [Table Support](https://virtuoso.dev/react-virtuoso/table-virtuoso/basic-table); - [Automatic handling of content resize](https://virtuoso.dev/react-virtuoso/virtuoso/auto-resizing); - [Custom Header, Footer, and empty list components](https://virtuoso.dev/react-virtuoso/virtuoso/customize-rendering); - [Pinned top items](https://virtuoso.dev/react-virtuoso/virtuoso/top-items); - [Endless scrolling](https://virtuoso.dev/react-virtuoso/virtuoso/endless-scrolling), [press to load more](https://virtuoso.dev/react-virtuoso/virtuoso/press-to-load-more); - [Initial top most item index](https://virtuoso.dev/react-virtuoso/virtuoso/initial-index); - [Scroll to index method](https://virtuoso.dev/react-virtuoso/virtuoso/scroll-to-index). ## Get Started ```sh npm install react-virtuoso ``` ```jsx import * as React from 'react' import * as ReactDOM from 'react-dom' import { Virtuoso } from 'react-virtuoso' const App = () => { return <Virtuoso style={{ height: '400px' }} totalCount={200} itemContent={(index) => <div>Item {index}</div>} /> } ReactDOM.render(<App />, document.getElementById('root')) ``` ## Documentation For in-depth documentation and live examples of all supported features, check the [documentation website](https://virtuoso.dev). ## Components ### [Message List](https://virtuoso.dev/message-list) The Virtuoso message list component is built specifically for human/chatbot conversations. In addition to the virtualized rendering, the component exposes an imperative data management API that gives you the necessary control over the scroll position when older messages are loaded, new messages arrive, and when the user submits a message. The scroll position can update instantly or with a smooth scroll animation. ### [Grouped Mode](https://virtuoso.dev/react-virtuoso/grouped-virtuoso/grouped-by-first-letter) The `GroupedVirtuoso` component is a variant of the flat `Virtuoso` component, with the following differences: - Instead of `totalCount`, the component exposes `groupCounts: number[]` property, which specifies the amount of items in each group. For example, passing `[20, 30]` will render two groups with 20 and 30 items each; - In addition the `itemContent` property, the component requires an additional `groupContent` property, which renders the **group header**. The `groupContent` callback receives the zero-based group index as a parameter. ### [Grid](https://virtuoso.dev/react-virtuoso/virtuoso-grid/grid-responsive-columns) The `VirtuosoGrid` component displays **same sized items** in multiple columns. The layout and item sizing is controlled through CSS class properties, which allows you to use media queries, min-width, percentage, etc. ### [Masonry](https://virtuoso.dev/masonry) The `Masonry` component renders columns from varying-height items, suitable for product listings, image galleries, etc. ### [Table](https://virtuoso.dev/react-virtuoso/table-virtuoso/basic-table) The `TableVirtuoso` component works just like `Virtuoso`, but with HTML tables. It supports window scrolling, sticky headers, sticky columns, and works with Tanstack Table and MUI Table. ### Works With Your UI Library You can customize the markup up to your requirements - check [the Material UI list demo](https://virtuoso.dev/react-virtuoso/third-party-integration/material-ui-endless-scrolling). ## Contributing Contributions are welcome! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for development setup, testing guidelines, and pull request process. ## Sponsors If you find Virtuoso valuable for your work, please consider [sponsoring the project](https://github.com/sponsors/petyosi). Your support helps ensure continued development and maintenance. ## Author Petyo Ivanov [@petyosi](//twitter.com/petyosi). ## License MIT License.

저장소 README를 불러오는 중…

이 저장소의 skills

소프트웨어 개발자 웹 개발자

직업 카테고리 2개 · 80% 분류됨

skill

직업 분류

설명

업데이트

reactive-engine

소프트웨어 개발자

Manage application state with the @virtuoso.dev/reactive-engine-* package family. Use this skill when (1) defining reactive state with Cell, Stream, Trigger, or Resource nodes, (2) wiring React components through EngineProvider, useCellValue, useCellValues,…

원문 언어: 영어

2026-10-01

data-table

미분류

Build virtualized data tables with @virtuoso.dev/data-table. Use this skill when (1) building a data grid with sorting, filtering, or grouped rows, (2) installing the shadcn-styled or headless table, (3) connecting remote/paginated data sources, (4) adding…

원문 언어: 영어

2026-09-29

message-list

웹 개발자

Build chat, messaging, and AI conversation UIs with @virtuoso.dev/message-list. Use this skill when (1) building a chat or messaging interface, (2) streaming AI assistant responses into a conversation, (3) loading older messages when scrolling up, (4) adding…

원문 언어: 영어

2026-09-11

react-virtuoso

소프트웨어 개발자

Build virtualized lists, grids, and tables with react-virtuoso. Use this skill when (1) rendering large or infinite lists, (2) building grouped lists with sticky headers, (3) virtualizing HTML tables, (4) laying out same-sized items in a responsive grid, (5)…

원문 언어: 영어

2026-07-14

docs-guidance

소프트웨어 개발자

Revises project documentation for human readability, conceptual flow, and example safety. Covers concept pages, example pages, troubleshooting, installation, and migration docs. Use when writing or reviewing docs, when the user says a page "feels off", "feels…

원문 언어: 영어

2026-05-24

수집된 skill 5개 중 5개를 표시합니다.

AI 어시스턴트로 설치

이 프롬프트를 복사해 사용 중인 AI 어시스턴트에 입력하세요.

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/petyosi/react-virtuoso.