React Integration

The glomex React component provides a simple way to integrate the glomex player into your React applications.

Installation

Install the package using npm:


npm install @glomex/integration-react

Usage

Basic Implementation

The simplest way to integrate the glomex player in your React application:


import { Integration } from '@glomex/integration-react';
 
export default function Player() {
  return (
    <Integration
      integrationId="YOUR_INTEGRATION_ID"
      playlistId="YOUR_PLAYLIST_ID"
    />
  );
}

Use the Player Component

Import and use the Player component in your application:


import Player from "./player"
 
export default function App() {
  return (
    <div>
      <Player />
    </div>
  );
}

Configure Required Props

💡

Make sure to replace YOUR_INTEGRATION_ID with your actual integration ID from the glomex dashboard. The integration ID is required for the player to work correctly.

Props

The Integration component accepts the following main props:

integrationId (required): Your glomex integration ID
playlistId: ID of the playlist to play

API Reference

For a complete list of available events, methods, and advanced usage options, please refer to the Integration API Documentation.

Advanced Example

Here’s an example showing how to handle events and control the player:


import { useEffect, useRef, type ComponentProps, type ComponentRef } from 'react';
import { Integration, IntegrationEvent } from '@glomex/integration-react';
 
const Player = (props: ComponentProps<typeof Integration>) => {
  const integrationRef = useRef<ComponentRef<typeof Integration>>(null);
 
  const handlePlay = () => {
    integrationRef.current?.play();
  };
 
  const handleContentStart = () => {
    console.log('content start', integrationRef.current?.content);
  };
 
  useEffect(() => {
    integrationRef.current?.addEventListener(
      IntegrationEvent.CONTENT_START,
      handleContentStart
    );
    return () => {
      integrationRef.current?.removeEventListener(
        IntegrationEvent.CONTENT_START,
        handleContentStart
      );
    };
  }, [integrationRef]);
 
  return (
    <div>
      <Integration
        ref={integrationRef}
        {...props}
      />
      <button type="button" onClick={handlePlay}>
        Play
      </button>
    </div>
  );
};
 
export default Player;

For the latest package information, visit the @glomex/integration-react npm package page .