> ## Documentation Index
> Fetch the complete documentation index at: https://docs.peerpop.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Event Component

> EventDisplayButton — open an event page in a modal

The **EventDisplayButton** is a React component that renders a button; when clicked, it opens a modal with an iframe showing your event URL (e.g. ticket or event page). Requires React 16.8+.

## Basic example

```jsx theme={null}
import EventDisplayButton from "peerpop/react";

function App() {
  return (
    <EventDisplayButton
      url="https://peerpop.io/view/events/wickedhalloweenparty+2025-10-30"
      buttonText="Get Tickets"
    />
  );
}
```

Clicking the button opens a modal with the live event page.

## CommonJS

```js theme={null}
const EventDisplayButton = require("peerpop/react");
```

## Props

| Prop           | Type   | Default         | Description                                                                   |
| -------------- | ------ | --------------- | ----------------------------------------------------------------------------- |
| `url`          | string | (required)      | Event URL to load in the iframe (e.g. ticket or event page).                  |
| `buttonText`   | string | `"Get Tickets"` | Label for the trigger button.                                                 |
| `buttonStyles` | string | —               | Optional CSS class name(s) for the button.                                    |
| `modalStyles`  | string | —               | Optional CSS class name(s) for the modal content (the box around the iframe). |

The modal is centered on desktop and full-screen on viewports ≤768px. The modal and iframe use an `id` derived from `url` for styling or scripting.

## With custom classes

```jsx theme={null}
<EventDisplayButton
  url="https://peerpop.io/view/events/wickedhalloweenparty+2025-10-30"
  buttonText="Get Tickets"
  buttonStyles="my-btn-class"
  modalStyles="my-modal-class"
/>
```

## Live demo

[Try it in your browser](https://garrettwalter.github.io/peerpop-npm/) — click “Get Tickets” to open the event in a modal.

To run the demo locally: `cd examples/demo && npm install && npm run dev`, then open [http://localhost:5173](http://localhost:5173).

## Peer dependency

| Package | Version   |
| ------- | --------- |
| react   | >= 16.8.0 |