INSTALL
npm install chat-virtualized-list
or
yarn add chat-virtualized-list
Using
import { VirtualizedList } from 'chat-virtualized-list';
<VirtualizedList
data={data}
dataLength={data.length}
height="100%"
inverse={true}
hasMorePrev={canUpdatePrev}
prev={requestPrevChunk}
hasMoreNext={canUpdateNext}
next={requestNextChunk}
>
{(message, index) => {
<div>
{message.text}
</div>
}
</VirtualizedList>
Properties
Prop | type | Description | Default value |
---|---|---|---|
height | CSS | CSS height | required |
data | Array<T> | data array for render messages | required |
dataLength | number | number of items in the list | required |
children | (item: T, index: number) => React.ReactNode | a function that returns a node for rendering an element | required |
className | string | add any custom class you want | "" |
style | CSSProperties | add any custom styles you want | {} |
hasMoreNext | boolean or undefined | tells the VirtualizedList component whether it can call the next function when it reaches the bottom of the scroll | undefined |
next | () => any | called when the bottom of the scroll is reached if hasMoreNext === true | undefined |
hasMorePrev | boolean or undefined | tells the VirtualizedList component whether it can call the prev function when it reaches the top of the scroll | undefined |
prev | () => any | called when the top of the scroll is reached if hasMorePrev === true | undefined |
getKey | (item: T, index: number) => string | get react key for list item | undefined |
threshold | number | A threshold value that determines when infinite scrolling will trigger the next call | 0.8 |
inverse | boolean | expand the scroll from the top | false |
idForScroll | string | scrolls to the specified id. the id must be specified in the dom element | undefined |