How to install the Add to Calendar Button with React

Step 0: Pick a solution

As React projects can be very versatile, there are multiple potential ways to work with the Add to Calendar Button.

• In rather basic projects, you can use the Web Component out-of-the-box.
• If you are using TypeScript, you would need to define a respective interface.
• In all cases, you could also use the official Add to Calendar Button React Wrapper instead of the main script. This comes with a deeper TypeScript and React integration.

We will highlight all options below.

Choose your fighter!

Step 1: npm installation

Option A: Web Component

Install the package from the npm registry.

npm install add-to-calendar-button

Option B: React Wrapper

If you rather go with the more specialized React Wrapper, install the following package instead:

npm install add-to-calendar-button-react

Step 2: Import it

Option A: Web Component

Import the module into the component, where you want to use the button.

import 'add-to-calendar-button';

Option B: React Wrapper

With the React Wrapper implementation, the import statement looks a little bit different.

import { AddToCalendarButton } from 'add-to-calendar-button-react';

Step 3: Optimize the TypeScript config for the Web Component

This step is only necessary if you are NOT using the React Wrapper AND if you are working with TypeScript!

In this case, you would need to define a respective global JSX interface. You do this within a *.d.ts type file (like "global.d.ts"), which needs to be picked up by your tsconfig (there, you should specify the "typeRoots" option).

// global.d.ts

declare global {
  namespace JSX {
    interface IntrinsicElements {
      ['add-to-calendar-button']: CustomElement<AddToCalendarButton>;
    }
  }
}

Step 4: Use it

Option A: Web Component

Start using it by adding a <add-to-calendar-button> tag to your HTML source code - with the options as attributes.

Your code block could look like the following:

<add-to-calendar-button
  name="Title"
  options="'Apple','Google'"
  location="World Wide Web"
  startDate="2023-03-19"
  endDate="2023-03-19"
  startTime="10:15"
  endTime="23:30"
  timeZone="America/Los_Angeles"
></add-to-calendar-button>

Option B: React Wrapper

If you went for the React Wrapper, you would specify a button by using the <AddtoCalendarButton> tag instead. Basically, you then use the imported React component instead of the custom element (Web Component).

Your code block would then look rather like this:

<AddToCalendarButton
  name="Title"
  options={['Apple','Google']}
  location="World Wide Web"
  startDate="2023-03-19"
  endDate="2023-03-19"
  startTime="10:15"
  endTime="23:30"
  timeZone="America/Los_Angeles"
></AddToCalendarButton>

Mind that with the Wrapper approach, you can provide Array options as actual Arrays, while with the Web Component, they need to be transformed to Strings!

Keep this style and specialties in mind when you look at more examples around here.
On other pages, we rather focus on the Web Component approach, but this can always easily transferred to the React Wrapper style.

Next Steps: