{"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.","language":"javascript","status":"maintenance","last_verified":"Fri May 01","install":{"commands":["npm install react-add-to-calendar-hoc"],"cli":null},"imports":["import AddToCalendarHOC from 'react-add-to-calendar-hoc'","const AddToCalendarHOC = require('react-add-to-calendar-hoc')","import AddToCalendarHOC from 'react-add-to-calendar-hoc'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}