@glomex/integration-react 1.1299.0 → 1.1300.0

package/README.md

@@ -16,14 +16,15 @@ Our ecosystem is designed to create value for all participants:
 
 ## Usage
 
-### Loading & integrating the player
+### Loading & integrating the player (TypeScript)
 
-```ts
-import { type React, useRef } from 'react';
-import { IntegrationReact, IntegrationEvent } from '@glomex/integration-react';
+```tsx
+// example: player.tsx
+import { useEffect, useRef, type ComponentProps, type ComponentRef } from 'react';
+import { Integration, IntegrationEvent } from '@glomex/integration-react';
 
-const MyApp = () => {
-  const integrationRef = useRef<React.ElementRef<typeof IntegrationReact>>(null);
+const Player = (props: ComponentProps<typeof Integration>) => {
+  const integrationRef = useRef<ComponentRef<typeof Integration>>(null);
 
   const handlePlay = () => {
     integrationRef.current?.play();
@@ -48,10 +49,9 @@ const MyApp = () => {
 
   return (
     <div>
-      <IntegrationReact
+      <Integration
         ref={integrationRef}
-        integrationId="FILL_IN_INTEGRATION_ID"
-        playlistId="FILL_IN_PLAYLIST_ID"
+        {...props}
       />
       <button type="button" onClick={handlePlay}>
         Play
@@ -60,5 +60,25 @@ const MyApp = () => {
   );
 };
 
-export default MyApp;
+export default Player;
+```
+
+**Usage** in your component:
+
+```tsx
+// example: app.tsx
+import Player from "./player"
+
+export default async function MyApp(props) {
+  const params = await props.params
+
+  return (
+    <div>
+      <Player
+        integrationId="REPLACE_WITH_INTEGRATION_ID"
+        playlistId="REPLACE_WITH_PLAYLIST_ID"
+      />
+    </div>
+  );
+}
 ```

package/build/index.d.ts

@@ -1,2 +1,2 @@
-export { IntegrationReact } from './integration-react';
+export { Integration } from './integration-react';
 export * from '@glomex/integration-web-component';

package/build/index.js

@@ -1,3 +1,3 @@
-export { IntegrationReact } from './integration-react';
+export { Integration } from './integration-react';
 // biome-ignore lint/performance/noReExportAll: <explanation>
 export * from '@glomex/integration-web-component';

package/build/integration-react.d.ts

@@ -17,7 +17,7 @@ declare global {
  *
  * @see {@link IntegrationElementEventMap} for all available events.
  */
-export declare const IntegrationReact: import("react").ForwardRefExoticComponent<IntegrationProperties & {
+export declare const Integration: import("react").ForwardRefExoticComponent<IntegrationProperties & {
     id?: string;
     mediaItems?: (string | {
         id: string;

package/build/integration-react.js

@@ -8,7 +8,7 @@ import { GlomexMediaItemReact } from './glomex-media-item-react';
  *
  * @see {@link IntegrationElementEventMap} for all available events.
  */
-export const IntegrationReact = forwardRef((props, ref) => {
+export const Integration = forwardRef((props, ref) => {
     const { children, integrationId, playlistId, index, hidden, topLevelIframe, placement, mediaItems, configs, preventLoadIntegration, ...rest } = props;
     const elementRef = useRef(null);
     if (mediaItems && playlistId) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glomex/integration-react",
-  "version": "1.1299.0",
+  "version": "1.1300.0",
   "description": "React component to integrate the glomex player",
   "documentation": "https://docs.glomex.com",
   "homepage": "https://glomex.com",
@@ -27,7 +27,7 @@
     "watch": "tsc --build --watch"
   },
   "dependencies": {
-    "@glomex/integration-web-component": "^1.1299.0"
+    "@glomex/integration-web-component": "^1.1300.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -40,5 +40,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0639a6ddf352930238f560cc0887345f7b401d60"
+  "gitHead": "52ba21ca8adb9ac37b354f47b8bf10532920badb"
 }