Virtual scroll

Component này sẽ tạo ra một list với số lượng item lớn mà không ảnh hưởng đến performance

Ví dụ

import { VirtualScroll } from '@xobuilder/ui';

export const Demo = () => {
  const list = [...Array(10000).keys()];

  return (
    <VirtualScroll
      data={list}
      height="50vh"
      itemHeight={80}
      renderItem={item => {
        return (
          <div
            style={{
              border: '1px solid',
              height: '100%',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            {item}
          </div>
        )
      }}
      onEndReached={() => {
        console.log('load more');
      }}
    />
  )
}

Props

Name	Type	Default	Description
data	`T[]`	-	List data
height	`string` \| `number`	-	Chiều cao của list
itemHeight	`number`	-	Chiều cao của một item
threshold?	`number`	`0`	Khoảng cách từ bottom của list đến bottom của item cuối cùng để trigger onEndReached
infinityStatus?	`Status`	`idle`	Trạng thái của infinityLoader
infinityLoader?	`ReactNode`	-	Component hiển thị loading khi scroll đến cuối list
infinityLoaderDisabled?	`boolean`	`false`	Disable loading khi load thêm dữ liệu sử dụng onEndReached
renderItem	`(item: T, index: number) => ReactNode`	-	Render một item
renderHeader?	`() => ReactNode`	-	Render header bên trong scroll
renderFooter?	`() => ReactNode`	-	Render footer bên trong scroll
onEndReached?	`() => void`	-	Callback khi scroll đến cuối list

Ví dụ​

Props​

Ví dụ

Props