react virtuoso

React Virtuoso- 가장 완벽한 반응 가상화 렌더링 목록/테이블/그리드 구성 요소 제품군.

• 상자 밖에서 가변 크기의 항목; 수동 측정 또는 하드 코딩 항목 높이가 필요하지 않습니다.
• 채팅 메시지 목록 ui new ;
• 끈적 끈적한 헤더가있는 그룹화 모드;
• 반응 형 그리드 레이아웃;
• 테이블 지원;
• 컨텐츠 크기 조정의 자동 처리;
• 사용자 정의 헤더, 바닥 글 및 빈 목록 구성 요소;
• 고정 된 최고 품목;
• 끝없는 스크롤링, 더 많은로드하려면 누릅니다.
• 초기 상단 대부분의 항목 색인;
• 인덱스 메소드로 스크롤하십시오.

라이브 예제 및 문서는 문서 웹 사이트를 확인하십시오.

스폰서

일을 위해 Virtuoso를 사용하는 경우 스폰서를 후원하십시오. 모든 기부는 프로젝트 개발 및 유지 보수에 많은 도움이됩니다.

시작하세요

npm install react-virtuoso

 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' ) ) 

메시지 목록

Virtuoso 메시지 목록 구성 요소는 인간/챗봇 대화를 위해 특별히 구축되었습니다. 가상화 된 렌더링 외에도 구성 요소는 명령형 데이터 관리 API를 노출하여 이전 메시지가로드 될 때 스크롤 위치를 제어 할 수있는 경우, 새 메시지가 도착하거나 사용자가 메시지를 제출할 때 필요한 제어를 제공합니다. 스크롤 위치는 즉시 또는 부드러운 스크롤 애니메이션으로 업데이트 될 수 있습니다.

그룹화 된 모드

GroupedVirtuoso 구성 요소는 "Flat" Virtuoso 의 변형이며 다음과 같은 차이점이 있습니다.

• totalCount 대신에 구성 요소는 groupCounts: number[] 속성을 노출시켜 각 그룹의 항목 양을 지정합니다. 예를 들어, [20, 30] 통과하면 각각 20 개와 30 개 항목이있는 두 그룹이 렌더링됩니다.
• 또한 itemContent 속성 인 구성 요소에는 추가 groupContent 속성이 필요하므로 그룹 헤더를 렌더링합니다. groupContent 콜백은 제로 기반 그룹 인덱스를 매개 변수로 수신합니다.

그리드

VirtuosoGrid 구성 요소는 여러 열에서 동일한 크기의 항목을 표시합니다. 레이아웃 및 항목 사이징은 CSS 클래스 속성을 통해 제어되므로 미디어 쿼리, 최소 폭, 백분율 등을 사용할 수 있습니다.

테이블

TableVirtuoso 구성 요소는 Virtuoso 와 같이 작동하지만 HTML 테이블과 함께 작동합니다. 창 스크롤, 끈적 끈적한 헤더, 끈적 끈적한 열을 지원하며 React 테이블 및 MUI 테이블과 함께 작동합니다.

선택한 UI 라이브러리와 함께 작동합니다

마크 업을 요구 사항까지 사용자 정의 할 수 있습니다. 자료 UI 목록 데모를 확인하십시오. 재정렬을 지원 해야하는 경우 React Sortable HOC 예제를 확인하십시오.

문서 및 데모

지원되는 기능 및 라이브 데모의 심층 문서 및 라이브 예는 문서 웹 사이트를 확인하십시오.

브라우저 지원

레거시 브라우저를 지원하려면 react-virtuoso 사용하기 전에 ResizeObserver Polyfill을로드해야 할 수도 있습니다.

 import ResizeObserver from 'resize-observer-polyfill'
if (!window.ResizeObserver)
  window.ResizeObserver = ResizeObserver

작가

Petyo Ivanov @petyosi.

기여

수정 및 새로운 기능

테스트를 실행하려면 npm run test 사용하십시오. 엔드 투 엔드 브라우저 기반 테스트 스위트는 npm run e2e 와 함께 실행 가능하며 페이지는 e2e/*.tsx 및 테스트 e2e/*.test.ts .

무언가를 디버깅하는 편리한 방법은 브라우저에서 테스트 케이스를 미리보기하는 것입니다. 이를 위해 npm run dev examples 폴더에서 구성 요소를 탐색 할 수있는 Ladle Server를 시작합니다.

특허

MIT 라이센스.