​
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