<ReactList> - The Root Component

The root component that wires everything together. It manages the entire data lifecycle — state, filters, pagination, search, and API calls — and provides context for all child components.

It’s the only component you must include. Every other component depends on the context provided by <ReactList>.

<ReactList>
  <ReactListItems>
    {/* Render your list items here */}
    {({ items }) => (
      <div>
        {items.map((item) => (
          <pre key={item.id}>{item}</pre>
        ))}
      </div>
    )}
  </ReactListItems>
</ReactList>

Props

Prop	Default	Type
endpoint		String - required The unique identifier for the data source. Passed to the requestHandler. It can be a URL or part of URL.
page	1	Number Initial page value.
perPage	25	Number Initial number of items per page.
sortBy		String Initial sorting field.
sortOrder	desc	String Initial sorting direction. Should be either asc or desc.
search		String Initial search term.
requestHandler		Override the global requestHandler defined during plugin setup — ideal for module-specific logic.
version		String Number Optional identifier for stateManager. You can use this with endpoint to generate new unique keys for state and delete old stale keys.
hasPaginationHistory	true	Boolean ReactList will append the current page number to the URL query params — improving back button support.
paginationMode	pagination	String pagination: Shows page numbers and traditional navigation. loadMore: Loads more items on scroll or button click.

Events

Name	Arguments	Description
onItemSelect		WIP
onResponse		WIP
afterPageChange		WIP
afterLoadMore		WIP

children

children as function

You can use children as function to render the list items based on your needs. It exposes a set of scoped variables that let you access and render the list state however you like.

children as function callback Props

Key	Description
items	Array Array of items returned from the API
response	Object Full response object from the requestHandler
isLoading	Boolean Indicating whether the list is currently loading
selection	Array Object containing selected item(s) if selection is enabled
error	Error object if the request failed
isEmpty	Boolean Indicating if the items array is empty
context	Object The full context object same as passed to the requestHandler and stateManager
refresh	Function Function to manually trigger a refetch