​
Example

Render a list and automatically get access to type-safe data. Pick between normal, infinite, and paginated modes. Optionally pass a query.

import { IDBList } from "instantdb-react-ui";

<IDBList
	mode="normal"
	schema={schema}
	db={db}
	entity="persons"
	render={(person, id) => (
		<p className="text-sm">{person.name}</p>
	)}
/>

​
Props

​
mode
'normal' | 'infinite' | 'paginated'
default:"normal"

The list rendering mode. ‘normal’ loads all data at once, ‘infinite’ loads more as you scroll, and ‘paginated’ uses page-based navigation.

​
entity
string
required

The name of the entity/model to query from the database.

​
render
(item: T, id: string) => ReactNode
required

Function to render each item in the list. Receives the item data and its ID.

​
query
object

The query object to filter and sort the data. If not provided, fetches all records of the entity.

​
skeleton
ReactNode

Component to show while data is loading.

​
noResults
ReactNode

Component to show when there are no results or an error occurs.

​
pageSize
number
default:10

Number of items per page (only for ‘infinite’ and ‘paginated’ modes).

​
pagination
PaginationState

Required when mode is ‘paginated’. Pagination state object from useIDBPagination hook