# ProductEventDetails

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


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

## How it looks

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

## Code sample

```tsx

  return <ProductEventDetails productId="<PRODUCT_ID>" />;
}
```

## Available props

- **productId** `string (required)`

  ID of the product you want to render

- **renderExhibitorCard** `(node: ReactNode, exhibitor: Exhibitor) => ReactNode`

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

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

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

  Render function to wrap product cells into your own links.

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

- **onClickOnBookmarkButton** `() => void`

  Callback when the user click on the bookmark button. You can redirect to another web page, open a custom modal, etc...
  NB: if you don't pass this callback, the bookmark button will be hidden.

- **stickyOffset** `number`

  Containers on the left and right of the main content will be sticky while the user scrolls (this represents the number in pixel from the top of the body)