Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
add-to-calendar-button
Advanced tools
add-to-calendar-button - npm Package Compare versions
Comparing version 2.3.0 to 2.3.1
| { | ||
| "name": "add-to-calendar-button", | ||
| "version": "2.3.0", | ||
| "version": "2.3.1", | ||
| "engines": { | ||
@@ -5,0 +5,0 @@ "node": ">=16.18.1", |
@@ -41,4 +41,2 @@  | ||
| And remember to [⭐ **star** this repository](#) in order to stay up-to-date and save it for later! 🤗 | ||
| <br /> | ||
@@ -127,88 +125,11 @@ | ||
| Based on your framework/library, you might need to make minor adjustments to the respective config. | ||
| Find the details for the most common ones below. | ||
| <br /> | ||
| Find detailed installation guides for the most common ones, like React, Angular, Vue, Svelte, or Astro at [add-to-calendar-button.com/#installation](https://add-to-calendar-button.com/#installation). | ||
| #### Angular | ||
| At the `app.module.ts`, import `CUSTOM_ELEMENTS_SCHEMA` from `@angular/core` and add the following to the `@NgModule` block: | ||
| ```javascript | ||
| @NgModule({ | ||
| //(...), | ||
| schemas: [CUSTOM_ELEMENTS_SCHEMA], | ||
| }) | ||
| ``` | ||
| <br /> | ||
| #### React | ||
| --- | ||
| **Option A:** | ||
| With basic React projects, the web component works out-of-the-box. | ||
| If you are working with TypeScript or other stricter setups, you would need to define a respective global JSX interface. | ||
| ```typescript | ||
| declare global { | ||
| namespace JSX { | ||
| interface IntrinsicElements { | ||
| ['add-to-calendar-button']: CustomElement<AddToCalendarButton>; | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
| **Option B:** | ||
| If this does not work OR if you want to keep it more convenient, you should use [the official Add to Calendar Button React Wrapper (click here)](https://github.com/add2cal/add-to-calendar-button-react). | ||
| This approach also enables you to provide object and array type props as objects and arrays. | ||
| Find all further information within the wrapper repository's Readme file. | ||
| <br /> | ||
| #### Vue 3 | ||
| In the `vite.config.js/ts`, add the following compiler option to treat all tags with a dash as custom elements and get rid of the warning. Anything else works out-of-the-box. | ||
| ```javascript | ||
| compilerOptions: { | ||
| isCustomElement: (tag) => tag.includes('-') | ||
| } | ||
| ``` | ||
| If you want to be more precise, you can also write something like `tag.startsWith('add-')` to apply this rule only to tags starting with "add-". | ||
| <br /> | ||
| #### Svelte | ||
| Works out-of-the-box. Nice! | ||
| <br /> | ||
| #### Astro | ||
| For Astro as well as other SSR setups, you might want to include the script from the CDN rather than working with the npm package! | ||
| If you still want to go for the npm way, you would need to add something like this to your page (instead of the import statement): | ||
| ```javascript | ||
| <script type="module" hoist> | ||
| const observer = new IntersectionObserver((entries) => { | ||
| for (const entry of entries) { | ||
| if (!entry.isIntersecting) continue; | ||
| observer.disconnect(); | ||
| import('../../node_modules/add-to-calendar-button/dist/module/index.js'); | ||
| } | ||
| }); | ||
| const instances = document.querySelectorAll('add-to-calendar-button'); | ||
| for (const instance of instances) observer.observe(instance); | ||
| </script> | ||
| ``` | ||
| <br /><br /> | ||
| ## 🎛️ Configuration | ||
@@ -274,2 +195,13 @@ | ||
| ## 🤗 Support it! | ||
| You like this project? It would be awesome if you would support it, so it lives on! | ||
| - ⭐ [Star the repository](#) in order to stay up-to-date and save it for later! | ||
| - 📣 Spread the word! On Twitter/X, Medium, Discord, Facebook, ... | ||
| - ✍️ Leave a review at [ProductHunt](https://www.producthunt.com/products/add-to-calendar-button-generator/reviews). | ||
| - 💌 Send us some positive feedback at the [discussion board](https://github.com/add2cal/add-to-calendar-button/discussions). | ||
| <br /> | ||
| ## ⚡ Changelog | ||
@@ -330,2 +262,4 @@ | ||
| <a href="https://github.com/Ortovoxx"><img src="https://avatars.githubusercontent.com/u/56805259?v=4" title="Ortovoxx" width="60" height="60"></a> | ||
| <a href="https://github.com/purushu007"><img src="https://avatars.githubusercontent.com/u/70796763?v=4" title="Purushu" width="60" height="60"></a> | ||
| <a href="https://github.com/cabello"><img src="https://avatars.githubusercontent.com/u/60936?v=4" title="Danilo Cabello" width="60" height="60"></a> | ||
| <a href="https://github.com/Goudarz"><img src="https://avatars.githubusercontent.com/u/3191949?v=4" title="Goudarz" width="60" height="60"></a> | ||
@@ -332,0 +266,0 @@ <a href="https://github.com/ragnarkurm"><img src="https://avatars.githubusercontent.com/u/5205088?v=4" title="Ragnar Kurm" width="60" height="60"></a> |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by0.09%
10375
Worsened metrics
- Total package byte prevSize
- decreased by-0.08%
959506
- Number of lines in readme file
- decreased by-19.41%
274
No dependency changes