# ProductEventListView

Source: https://swapcard.dev/react-sdk/pages/product-event-list-view


This component allows you to integrate the product list at the event level.

## How it looks

<img src="/img/product-list-view.png" />

## Code sample

```tsx

  return <ProductEventListView viewId="<YOUR_PRODUCT_EVENT_VIEW_ID_HERE>" />;
}
```

## Available props

- **viewId** `string (required)`

  ID of the view you want to render

- **renderProductCard** `(node: ReactNode, product: Product) => ReactNode`

  Render function to wrap each product cells into your own links.

  ```tsx
  renderProductCard={(node, product) => <a href={`/path/to/product/${product.id}`}>{node}</a>}
  ```

- **categoryId** `string`

  ID of the product category

- **renderCategoryLink** `(node: ReactNode, category: Category) => ReactNode`

  Render function to wrap each top navigation category cells into your own links.

  ```tsx
  renderCategoryLink={(node, category) => <a href={`/products?categoryId=${category.id}`}>{node}</a>}
  ```

- **renderViewLink** `(node: ReactNode, view: View) => ReactNode`

  Render function to create the link of your view

  ```tsx
  renderViewLink={(node, view) => <a href={`/products`}>{node}</a>}
  ```

- **search** `string`

  Used to filter result based on user search (to combine with **onSearch**)

- **onSearch** `(search: string) => void`

  Callback when user searches through the input (to combine with **search**)

- **selectedFilters** `Filter[]`

  Used to filter result based on user filters (to combine with **onFilter**)

- **onFilter** `(filters: Filter[]) => void`

  Callback when user filters through checkboxes (to combine with **selectedFilters**)

- **stickyOffset** `number`

  Search and filter containers will be sticky while the user scrolls (this represents the number in pixel from the top of the body)

- **paginationMode** `INFINITE_SCROLL | BUTTON`

  You can select either if you want pagination to be trigger automatically when the user scroll, or to display a button to force the user to interact to load more elements.