Registry / web-framework / react-add-to-calendar-hoc

react-add-to-calendar-hoc

library1.0.10jsnpmunverified

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.

web-framework serialization

npm install react-add-to-calendar-hoc

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-ADD-TO-CALEN

react-add-to-calendar-hoc

web-frameworkjavascriptv1.0.10

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

AddToCalendarHOC

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

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

Default export; do not use named import.

AddToCalendarHOC (require)

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

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

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;

Debug

Known issues

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

affects: >=1.0.10

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

affects: >=1.0.0

gotchaDate 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').

affects: >=1.0.0

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

affects: >=1.0.3

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

affects: >=1.0.7

Errors

Common errors & fixes

AddToCalendarHOC is not a function

Incorrect import: using named import instead of default.

fix

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

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

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.

Calendar link does not open in Chrome/Safari on mobile

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

fix

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

Upgrade

Version history

1.0.10latest on npm

Audit

Dependencies

reactrequiredPeer dependency: required to use the HOC properly.

react-domrequiredPeer dependency: required for DOM rendering.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/jasonleibowitz/react-add-to-calendar-hoc ↗

packagehttps://www.npmjs.com/package/react-add-to-calendar-hoc ↗

homepagehttp://leibowitz.me/react-add-to-calendar-hoc/ ↗