{"id":26144,"library":"react-add-to-calendar-hoc","title":"React Add to Calendar HOC","description":"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.","status":"maintenance","version":"1.0.10","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/jasonleibowitz/react-add-to-calendar-hoc","tags":["javascript"],"install":[{"cmd":"npm install react-add-to-calendar-hoc","lang":"bash","label":"npm"},{"cmd":"yarn add react-add-to-calendar-hoc","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-add-to-calendar-hoc","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: required to use the HOC properly.","package":"react","optional":false},{"reason":"Peer dependency: required for DOM rendering.","package":"react-dom","optional":false}],"imports":[{"note":"Default export; do not use named import.","wrong":"import { AddToCalendarHOC } from 'react-add-to-calendar-hoc'","symbol":"AddToCalendarHOC","correct":"import AddToCalendarHOC from 'react-add-to-calendar-hoc'"},{"note":"CommonJS: default export via require, not destructured.","wrong":"const { AddToCalendarHOC } = require('react-add-to-calendar-hoc')","symbol":"AddToCalendarHOC (require)","correct":"const AddToCalendarHOC = require('react-add-to-calendar-hoc')"},{"note":"No type definitions included; you may need to create a custom declaration file.","wrong":null,"symbol":"AddToCalendarHOC (TypeScript)","correct":"import AddToCalendarHOC from 'react-add-to-calendar-hoc'"}],"quickstart":{"code":"import React from 'react';\nimport AddToCalendarHOC from 'react-add-to-calendar-hoc';\nimport MyButton from './MyButton';\nimport MyDropdown from './MyDropdown';\n\n// Required: component with a dropdown for calendar selection\nconst AddToCalendar = AddToCalendarHOC(MyButton, MyDropdown);\n\nfunction App() {\n  const event = {\n    title: \"Sample Event\",\n    description: \"This is a test event.\",\n    location: \"123 Main St, Anytown, USA\",\n    startDatetime: \"2025-04-01T09:00:00-04:00\",\n    endDatetime: \"2025-04-01T12:00:00-04:00\",\n  };\n  return (\n    <AddToCalendar\n      event={event}\n      buttonProps={{ style: { backgroundColor: 'blue', color: 'white' } }}\n      buttonText=\"Add to My Calendar\"\n      dropdownProps={{ position: 'bottom-right' }}\n    />\n  );\n}\nexport default App;","lang":"javascript","description":"Creates an AddToCalendar component by passing a custom button and dropdown. Renders the button; on click, shows the dropdown to select calendar service."},"warnings":[{"fix":"Ensure 'filename' is passed if custom ICS filename is desired.","message":"v1.0.10: ICS download filename customization introduced, but requires a 'filename' property in buttonProps or event object.","severity":"breaking","affected_versions":">=1.0.10"},{"fix":"Upgrade to React 16+ for full support.","message":"React 15 support is deprecated. The package peer deps allow React 15, but it may not be tested.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Always include time and timezone offset (e.g., '2025-04-01T09:00:00-04:00').","message":"Date strings must be in ISO 8601 format with timezone. Ambiguous dates (like '2025-04-01') may produce wrong calendar entries.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use desktop Outlook or rely on ICS download for Outlook.","message":"Outlook.com link is not generated; only Outlook Desktop (webcal) is supported. v1.0.3 replaced Outlook web with desktop.","severity":"gotcha","affected_versions":">=1.0.3"},{"fix":"Include polyfills for Object.values and handle URI encoding for older browsers.","message":"IE11 compatibility was added in v1.0.7 but requires polyfills for Object.values and URI encoding.","severity":"gotcha","affected_versions":">=1.0.7"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Use `import AddToCalendarHOC from 'react-add-to-calendar-hoc'` (no curly braces).","cause":"Incorrect import: using named import instead of default.","error":"AddToCalendarHOC is not a function"},{"fix":"Use v1.0.7+ or include a polyfill for Object.values.","cause":"IE11 does not support Object.values; v1.0.7 uses Object.keys but older versions may still have the issue.","error":"Object doesn't support property or method 'values' (in IE)"},{"fix":"Consider using ICS download (buttonProps.download = true) for mobile.","cause":"Mobile browsers may not handle webcal:// links. ICS download is more reliable.","error":"Calendar link does not open in Chrome/Safari on mobile"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}