Biofarma | Bind UI

Infinite Scroll

Type	Resource
Design	Figma
Web	Web Storybook
Code	Gitlab

Usage

import { InfiniteScroll } from 'bio-bind-ui';

<InfiniteScroll
  height={200}
  isFetchingMore
  isRowLoaded={() => {}}
  loadMoreRows={() => {}}
  mode='light'
  rowHeight={40}
  rowRenderer={() => {}}
  threshold={10}
  width={300}
/>

Examples

Mode (optional)

Use mode to use dark or light

Props

Props	Required	Default	Type	description
isFetchingMore	false	`true`	`true` `false`	Boolean indicating if more rows are being loaded.
rowHeight	false	-	`number`	Either a fixed row height (number) or a function that returns the height of a row given its index.
width	false	-	`number`	Width of the list.
height	false	-	`number`	AHeight constraint for list.
mode	false	`light`	`light` `dark`	The theme mode of the Infinite Scroll (`light` or `dark`).
threshold	false	-	`number`	Threshold at which to pre-fetch data.
isRowLoaded	false	-	`function`	Function responsible for tracking the loaded state of each row.
loadMoreRows	false	-`	`function`	Callback to be invoked when more rows must be loaded.
rowRenderer	false	-	`function`	Responsible for rendering a row. Learn more.
rowCount	false	-	`object`	Number of rows in list.
remoteRowCount	false	-	`object`	Number of rows in list.
minimumBatchSize	false	-	`number`	Minimum number of rows to load at once.
children	false	-	`ReactNode`	Optional render prop for custom list implementation.
loadingIndicator	false	-	`ReactNode`	Optional loading spinner component or render prop.
loadingText	false	-	`string`	Optional loading text.

Drawer Modal