update react integration guide

add2cal · Dec 31, 2023 · b65d0dd · b65d0dd
1 parent 9d1480e
commit b65d0dd
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 46 deletions.
diff --git a/src/de/integration/react.md b/src/de/integration/react.md
@@ -6,7 +6,6 @@
 Da React-Projekte sehr vielseitig sein können, gibt es auch mehrere mögliche Wege den Add to Calendar Button passend zu integrieren.
 
 * In eher einfachen Projekten kann das Ganze als Web Component out-of-the-box genutzt werden.
-* Sofern du TypeScript nutzt, musst du ein entsprechendes Interface definieren.
 * In allen Fällen kannst du alternativ zur nativen Nutzung auch den offiziellen [Add to Calendar Button React Wrapper](https://github.com/add2cal/add-to-calendar-button-react) nutzen. Dieser beinhaltet direkt eine tiefergehende TypeScript- und React-Unterstützung.
 
 Choose your fighter!
@@ -47,33 +46,14 @@ Bei der Implementierung des React Wrappers sieht das Import-Statement etwas ande
 import { AddToCalendarButton } from 'add-to-calendar-button-react';
 ```
 
-## Schritt 3: Optimiere die TypeScript-Config für den Web Component
-
-::: info
-Dieser Schritt ist nur notwendig, wenn du NICHT den React-Wrapper nutzt UND mit TypeScript arbeitest!
-:::
-
-In diesem Fall musst du ein entsprechendes globales JSX Interface definieren. Das erledigst du in einer *.d.ts Type Datei (bspw. "global.d.ts"), die von deiner tsconfig gelesen wird (dort sollte die "typeRoots" Option entsprechend spezifiziert sein).
-
-```typescript
-// global.d.ts
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      ['add-to-calendar-button']: CustomElement<AddToCalendarButton>;
-    }
-  }
-}
-```
-
-## Schritt 4: Loslegen
+## Schritt 3: Loslegen
 
 ### Option A: Web Component
 
 Beginne mit der Nutzung, indem du einen `<add-to-calendar-button proKey="prokey-deines-events" />` Tag in deinen Quellcode einfügst.
 
 ### Option B: React Wrapper
-If you went for the React Wrapper, the tag will look a little different. Basically, you then use the imported React component instead of the custom element (Web Component).
+
+Sofern du den React Wrapper nutzt, sieht dein Tag ein wenig anders aus. Im Grunde nutzt du hierbei den importierten React-Component anstelle des Custom Elements (Web Component).
 
 Beginne mit der Nutzung, indem du einen `<AddtoCalendarButton proKey="prokey-deines-events" />` Tag in deinen Quellcode einfügst.
diff --git a/src/integration/react.md b/src/integration/react.md
@@ -6,8 +6,7 @@
 As React projects can be very versatile, there are multiple potential ways to work with the Add to Calendar Button.
 
 * In rather basic projects, you can use the Web Component out-of-the-box.
-* If you are using TypeScript, you would need to define a respective interface.
-* In all cases, you could also use the official [Add to Calendar Button React Wrapper](https://github.com/add2cal/add-to-calendar-button-react) instead of the main script. This comes with a deeper TypeScript and React integration.
+* In all other cases, you could also use the official [Add to Calendar Button React Wrapper](https://github.com/add2cal/add-to-calendar-button-react) instead of the main script. This comes with a deeper TypeScript and React integration.
 We will highlight all options below.
 
 Choose your fighter!
@@ -48,33 +47,14 @@ With the React Wrapper implementation, the import statement looks a little bit d
 import { AddToCalendarButton } from 'add-to-calendar-button-react';
 ```
 
-## Step 3: Optimize the TypeScript config for the Web Component
-
-::: info
-This step is only necessary if you are NOT using the React Wrapper AND if you are working with TypeScript!
-:::
-
-In this case, you would need to define a respective global JSX interface. You do this within a *.d.ts type file (like "global.d.ts"), which needs to be picked up by your tsconfig (there, you should specify the "typeRoots" option).
-
-```typescript
-// global.d.ts
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      ['add-to-calendar-button']: CustomElement<AddToCalendarButton>;
-    }
-  }
-}
-```
-
-## Step 4: Use it
+## Step 3: Use it
 
 ### Option A: Web Component
 
 Start using it by adding a `<add-to-calendar-button proKey="prokey-of-your-event">` tag to your source code.
 
 ### Option B: React Wrapper
+
 If you went for the React Wrapper, the tag will look a little different. Basically, you then use the imported React component instead of the custom element (Web Component).
 
 Start using it by adding a `<AddtoCalendarButton proKey="prokey-of-your-event">` tag to your source code.