How to integrate Buttons and RSVP Forms with React

React 19 supports Web Components directly. Use the core add-to-calendar-button package and the <add-to-calendar-button> element.

Step 1: npm installation

npm install add-to-calendar-button

Step 2: Create your component

src/EventButton.tsx:

import 'add-to-calendar-button/styles/all';
import 'add-to-calendar-button/i18n/de';
import 'add-to-calendar-button';

export default function EventButton() {
  return (
    <add-to-calendar-button prokey="prokey-of-your-event"></add-to-calendar-button>
  );
}

Your event data, styles, and RSVP settings remain connected to the PRO app through the prokey.

This example is for a browser-rendered React app. For Next.js, use the Next.js guide.

Step 3: Add the custom element TypeScript declaration

Register the JSX type once in a declaration file included by your tsconfig.json. JavaScript projects can skip this step.

// src/global.d.ts
import type { AddToCalendarButtonType } from 'add-to-calendar-button';
import type { DetailedHTMLProps, HTMLAttributes } from 'react';

declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
      'add-to-calendar-button': DetailedHTMLProps<
        Omit<HTMLAttributes<HTMLElement>, keyof AddToCalendarButtonType>,
        HTMLElement
      > & AddToCalendarButtonType;
    }
  }
}

export {};

If compilerOptions.types is set, include react and react-dom alongside its existing entries. For example, preserve vite/client in a Vite project.

Bring your own button

Use atcb_action from the core package in a React click handler to open the button or form as a modal. Pass the trigger element for focus handling.

import { atcb_action } from 'add-to-calendar-button';

export default function CustomEventButton() {
  return (
    <button
      onClick={(event) =>
        atcb_action({ prokey: 'prokey-of-your-event' }, event.currentTarget)
      }
    >
      Open event
    </button>
  );
}

Styles and languages

The npm package includes only the default style and English by default. The example mixes add-to-calendar-button/styles/all with add-to-calendar-button/i18n/de, which is valid: use add-to-calendar-button/styles/3d when your style is fixed, or add-to-calendar-button/styles/all when remote PRO configuration can change it without deployment. Import the specific language or small known set, such as add-to-calendar-button/i18n/de, by default; use add-to-calendar-button/i18n/all only when languages can change unpredictably at runtime. Both /all imports increase the bundle because they include every respective asset.

Alternatively, load styles and languages dynamically from jsDelivr by setting style-source="https://cdn.jsdelivr.net/npm/add-to-calendar-button@3/dist/styles/" on the element. Apply the same strategy to custom triggers; the option is named styleSource in atcb_action.