A few feature requests

[airowe]

1. Would it be possible to pass a boolean prop that would determine whether or not to trigger atcb_generate_bg_overlay?
2. Can you generate types for Typescript?
3. Is it possible to create a true React component so as not to be dependent on passing literal strings as inner HTML for the atcb className method (atcb_init).

[jekuer]

Hi Adam!
I moved this to the Discussions board, since it is a mixture of multiple things.

1. Why? Is it just for the look or something different?
   The reason I am asking: The bg_overlay is used as trigger to close the options list in many cases. This is necessary to have a stable process. We could include the option and make it fully transparent in this case. However, you could also achieve this by manipulating the css.
2. Would be valuable, I agree. This would be quite some way down the road. You can speed this up by joining the group (ping me in this case) :) .
3. Absolutely! This is on the roadmap. I would expect it some time in August (along with other nice things for React).

Thanks for your contribution and interest in this repo!

Best,
Jens

[jekuer]

.atcb-bgoverlay {
    background: rgb(20 20 20 / 0);
    backdrop-filter: none;
}

... would do the job. In doubt, you could add an !important flag.
But if it is just about the look, I would also add the config option in the next release.

[airowe]

So, typescript and react are not allowing me to manipulate a specific id's style unless I'm missing something.

[jekuer]

You are right - it gets ugly there. Will be solved/offered at the next release (next 3 days)!

[ClemSK]

I've had to resort to !important, attribute selectors and passing Sass variables to jsx for styling divs that are outside the DOM tree - very janky / hacky with limited control for dynamic / responsive UIs.

[jekuer]

To be fair, there were 2 props missing in the wrapper.
With the latest version, you should be able to set styleLight and styleDark to manipulate the look.
See https://add-to-calendar-button.com/en/advanced-use#1 for more details.

[jekuer]

the background option has been implemented with the latest v1.11

[jekuer]

Hi @airowe ,

check out https://github.com/add2cal/add-to-calendar-button-react .
This should solve all of the mentioned issues 🙂.

In terms of styling I would recommend adding your own global css and override style for the moment. There will be a more stable option coming soon.

[ClemSK]

+1 on TypeScript - the types are very odd and data is being passed loosely with JS. TS would enforce stronger data consistency in the app.

Moreover, can you have more descriptive names rather than just 'data' e.g. 'filenameData', 'calData' etc.. It would be much easier to track how data is being passed around.

Also, can you update '==' and '!=' to '===' and '!===' again for better data quality. A find and replace should do the trick.

[jekuer]

Yes, could be improved even further.
Something for one of the next bigger updates.