create a React package for this library

[capaj]

ideally I'd like to do just:

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

<AddToCalendarButton event={...}>

Currently it requires a bit more work.

[chadoh]

Note that you can import the atcb_action function, which works well with React. From the docs:

import React from 'react'
import { atcb_action } from 'add-to-calendar-button'

const AddToCalendar = () => {
  const [name, setName] = React.useState('Some event')
  return (
      <form onSubmit={e => {
        e.preventDefault()
        atcb_action({
          name,
          startDate: "2022-01-14",
          endDate: "2022-01-18",
          options: ['Apple', 'Google', 'iCal', 'Microsoft365', 'Outlook.com', 'MicrosoftTeams', 'Yahoo'],
          trigger: "click",
          iCalFileName: "Reminder-Event",
        })
      }}>
        <input value={name} onChange={setName} />
        <input class="atcb_customTrigger" type="submit" value="save">
      </form>
  );
}

[jekuer]

I believe this should be rather about creating a web component than React in general (so, it would be more universal).

I already thought about maybe:

• moving the css into the js file (for better encapsuling when using it the vanilla way without npm).
• extending the HTMLElement wiith an AddToCalendarButton element.
• Offer the option to move the config into data-attributes rather than the JSON way - while the JSON way is still the way to go for Schema.org implementation.

Any thoughts on that? @chadoh , @capaj

[jekuer]

Took some time. There is now a dedicated wrapper for React fulfilling your needs ☺️.

Check out https://github.com/add2cal/add-to-calendar-button-react