Skip to main content
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

PropTypeDefaultDescription
urlstring(required)Event URL to load in the iframe (e.g. ticket or event page).
buttonTextstring"Get Tickets"Label for the trigger button.
buttonStylesstring—Optional CSS class name(s) for the button.
modalStylesstring—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

PackageVersion
react>= 16.8.0