react virtuoso

React Virtuoso - daftar rendering virtualisasi reaksi paling lengkap/tabel/grid family of components.

• Item berukuran variabel di luar kotak; Tidak diperlukan pengukuran manual atau ketinggian item coding hard-coding;
• Daftar Pesan Obrolan UI Baru ;
• Mode dikelompokkan dengan header lengket;
• Tata letak grid responsif;
• Dukungan meja;
• Penanganan otomatis pengubah ukuran konten;
• Header khusus, footer, dan komponen daftar kosong;
• Item teratas yang disematkan;
• Menggulir tanpa akhir, tekan untuk memuat lebih banyak;
• Indeks item teratas awal teratas;
• Gulir ke metode indeks.

Untuk contoh dan dokumentasi langsung, periksa situs web dokumentasi.

Sponsor

Jika Anda menggunakan virtuoso untuk bekerja, sponsornya. Donasi apa pun banyak membantu pengembangan dan pemeliharaan proyek.

Mulai

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

Daftar Pesan

Komponen Daftar Pesan Virtuoso dibangun khusus untuk percakapan manusia/chatbot. Selain rendering tervirtualisasi, komponen ini memperlihatkan API manajemen data yang penting yang memberi Anda kontrol yang diperlukan atas posisi gulir ketika pesan yang lebih lama dimuat, pesan baru tiba, dan ketika pengguna mengirimkan pesan. Posisi gulir dapat memperbarui secara instan atau dengan animasi gulir yang halus.

Mode dikelompokkan

Komponen GroupedVirtuoso adalah varian dari Virtuoso "datar", dengan perbedaan berikut:

• Alih -alih totalCount , komponen memaparkan properti groupCounts: number[] , yang menentukan jumlah item di setiap grup. Misalnya, lewat [20, 30] akan membuat dua kelompok dengan masing -masing 20 dan 30 item;
• Selain itu properti itemContent , komponen membutuhkan properti groupContent tambahan, yang menjadikan header grup . Callback groupContent menerima indeks grup berbasis nol sebagai parameter.

Kisi

Komponen VirtuosoGrid menampilkan item berukuran sama di beberapa kolom. Tata letak dan ukuran item dikendalikan melalui properti kelas CSS, yang memungkinkan Anda menggunakan kueri media, minimal lebar, persentase, dll.

Meja

Komponen TableVirtuoso berfungsi seperti Virtuoso , tetapi dengan tabel html. Ini mendukung pengguliran jendela, header lengket, kolom lengket, dan berfungsi dengan reaksi meja dan meja MUI.

Bekerja dengan pustaka pilihan UI Anda

Anda dapat menyesuaikan markup sesuai kebutuhan Anda - periksa demo daftar UI material. Jika Anda perlu mendukung pemesanan ulang, periksa contoh react sortable hoc.

Dokumentasi dan demo

Untuk dokumentasi mendalam dan contoh langsung dari fitur yang didukung dan demo langsung, periksa situs web dokumentasi.

Dukungan Browser

Untuk mendukung browser warisan, Anda mungkin harus memuat Polyfill Penyerangan Ulang-Uang sebelum menggunakan react-virtuoso :

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

Pengarang

Petyo Ivanov @petyosi.

Berkontribusi

Perbaikan dan fitur baru

Untuk menjalankan tes, gunakan npm run test . Rangkaian uji berbasis browser end-to-end dapat dijalankan dengan npm run e2e , dengan halaman menjadi e2e/*.tsx dan tes e2e/*.test.ts

Cara yang nyaman untuk men -debug sesuatu adalah dengan melihat pratinjau kasus uji di browser. Untuk melakukan itu, jalankan npm run dev - itu akan meluncurkan server sendok yang memungkinkan Anda menelusuri komponen di folder examples .

Lisensi

Lisensi MIT.