React Add to Calendar HOC

1.0.10 verified Fri May 01 auth: no javascript maintenance

A lightweight higher-order component for adding 'add to calendar' functionality to custom React components. Current stable version is 1.0.10. It is unopinionated about styling and date libraries, allowing you to bring your own button/dropdown/modal components and handle date formatting with any library (e.g., Moment.js, date-fns). Releases are infrequent (last update 2019). Key differentiators: minimal bundle size compared to alternatives like react-add-to-calendar, no bundled date library, flexible component injection. Supported calendars: Google, Yahoo, Outlook, iCal/ICS download.

Common errors

error AddToCalendarHOC is not a function ↓

cause Incorrect import: using named import instead of default.

fix

Use import AddToCalendarHOC from 'react-add-to-calendar-hoc' (no curly braces).

error Object doesn't support property or method 'values' (in IE) ↓

cause IE11 does not support Object.values; v1.0.7 uses Object.keys but older versions may still have the issue.

fix

Use v1.0.7+ or include a polyfill for Object.values.

error Calendar link does not open in Chrome/Safari on mobile ↓

cause Mobile browsers may not handle webcal:// links. ICS download is more reliable.

fix

Consider using ICS download (buttonProps.download = true) for mobile.

Warnings

breaking v1.0.10: ICS download filename customization introduced, but requires a 'filename' property in buttonProps or event object. ↓

fix Ensure 'filename' is passed if custom ICS filename is desired.

deprecated React 15 support is deprecated. The package peer deps allow React 15, but it may not be tested. ↓

fix Upgrade to React 16+ for full support.

gotcha Date strings must be in ISO 8601 format with timezone. Ambiguous dates (like '2025-04-01') may produce wrong calendar entries. ↓

fix Always include time and timezone offset (e.g., '2025-04-01T09:00:00-04:00').

gotcha Outlook.com link is not generated; only Outlook Desktop (webcal) is supported. v1.0.3 replaced Outlook web with desktop. ↓

fix Use desktop Outlook or rely on ICS download for Outlook.

gotcha IE11 compatibility was added in v1.0.7 but requires polyfills for Object.values and URI encoding. ↓

fix Include polyfills for Object.values and handle URI encoding for older browsers.

Install

npm install react-add-to-calendar-hoc

yarn add react-add-to-calendar-hoc

pnpm add react-add-to-calendar-hoc

Imports

AddToCalendarHOC

wrong

import { AddToCalendarHOC } from 'react-add-to-calendar-hoc'

correct

import AddToCalendarHOC from 'react-add-to-calendar-hoc'

Default export; do not use named import.

AddToCalendarHOC (require)

wrong

const { AddToCalendarHOC } = require('react-add-to-calendar-hoc')

correct

const AddToCalendarHOC = require('react-add-to-calendar-hoc')

CommonJS: default export via require, not destructured.

AddToCalendarHOC (TypeScript)
```
import AddToCalendarHOC from 'react-add-to-calendar-hoc'
```
No type definitions included; you may need to create a custom declaration file.

Quickstart

Creates an AddToCalendar component by passing a custom button and dropdown. Renders the button; on click, shows the dropdown to select calendar service.

import React from 'react';
import AddToCalendarHOC from 'react-add-to-calendar-hoc';
import MyButton from './MyButton';
import MyDropdown from './MyDropdown';

// Required: component with a dropdown for calendar selection
const AddToCalendar = AddToCalendarHOC(MyButton, MyDropdown);

function App() {
  const event = {
    title: "Sample Event",
    description: "This is a test event.",
    location: "123 Main St, Anytown, USA",
    startDatetime: "2025-04-01T09:00:00-04:00",
    endDatetime: "2025-04-01T12:00:00-04:00",
  };
  return (
    <AddToCalendar
      event={event}
      buttonProps={{ style: { backgroundColor: 'blue', color: 'white' } }}
      buttonText="Add to My Calendar"
      dropdownProps={{ position: 'bottom-right' }}
    />
  );
}
export default App;