Event Component

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

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

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

<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 — 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.

Peer dependency

Package	Version
react	>= 16.8.0

Getting Started

Event Management

Marketing Tools

Finance

Profile & Account

API & SDK

Event Component

Basic example

CommonJS

Props

With custom classes

Live demo

Peer dependency

​Basic example

​CommonJS

​Props

​With custom classes

​Live demo

​Peer dependency

Basic example

CommonJS

Props

With custom classes

Live demo

Peer dependency