# React Plugin

The nexxPLAY Embed Code System works also in any React Project. You can simply embed any iFrame Plugin to embed a nexxPLAY instance directly.

For more Control, 3Q nexx offers a dedicated React Plugin, that can be added to your Project easily. It supports all Streamtypes and Widgets and all Post-Message controlled Functionality.

You can find the Project here:

{% embed url="<https://github.com/3qnexx/nexxPLAY-React>" %}

## Basic Integration

```javascript
npm install nexxplay-react
```

A very simple Usage could look like this:

```javascript
import {NexxPLAY} from "nexxplay-react";

export default function TestPlayer{

	return (
		<div style={{width:"640px",height:"320px"}}>
			<NexxPLAY domain="999" mediaHash="ABCDEFG" streamtype="video" params="{{autoPlay:0}}" />
		</div>
	);

}
```

## Supported Attributes

You can use the following Attributes directly in your JSX - only "domain" and "mediaHash" are mandatory, the rest is optional (if you need any other Streamtype than "video", "streamtype" is also mandatory").

| Attribute           | Type                                                                                                                                                                         | Description                                                                                                                |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| **domain**          | int                                                                                                                                                                          | your 3Q nexx Domain ID                                                                                                     |
| **mediaHash**       | String                                                                                                                                                                       | the "Hash" of the Media, you want to include                                                                               |
| **streamtype**      | \[video, audio, live, radio, playlist, audioalbum, collection, set, rack, widget]                                                                                            | the Streamtype of the given Media Hash. If omitted, defaults to "video".                                                   |
| **deliveryPartner** | String                                                                                                                                                                       | if the Media Reporting should be connected to a Delivery Partner, add its Code here.                                       |
| **protocol**        | String                                                                                                                                                                       | if you want to force "http" Usage, set this to "http". It defaults to "https".                                             |
| **params**          | Object with the following possible Keys \[autoPlay, language, direction, dataMode, exitMode, streamingFilter, consentString, delay, disableAds, affiliateCode, campaignCode] | if you need additional Parameters, that would be appended via GET Parameters, set them here.                               |
| **embedHost**       | String                                                                                                                                                                       | if you use a custom Embed Domain, enter the Domain (without protocol and Slashes) here. It defaults to "embed.nexx.cloud". |
| **onPlayerEvent**   | function                                                                                                                                                                     | to receive PlayerEvents in your app (see below)                                                                            |
| **onPlayerData**    | function                                                                                                                                                                     | to receive Player Metadata in your app (see below)                                                                         |

## Interacting with the Player

If you want to interact with the Player, use the "useRef" Hook from React to control the Player Instance. For Notification/Reporting on the various Player Events, you can use the "setEventListener" Method of the Player.

```javascript
import {useRef,useEffect} from 'react';
import {NexxPLAY} from "nexxplay-react";

export default function TestPlayer{

	const player=useRef(null);

        useEffect(() => {
 		if(player.current){
 			player.current.setEventListener(onEvent);
 		}
    	}, []);
    
    	function onEvent(event){
    		console.log(event);
    	}
	
	return (
		<div style={{width:"640px",height:"320px"}}>
			<NexxPLAY domain="999" media="ABCDEFG" streamtype="video"
				ref={player} />
		</div>
	);

}
```

## Available Functions

You can control each Player Instance after it has been created with the general SDK Functions from within React by using the "useRef" Hook and use its Methods afterwards.

```javascript
import {useRef} from 'react';
import {NexxPLAY} from "nexxplay-react";

export default function TestPlayer{

	const player=useRef(null);

	function pausePlayer(){
		if(player.current){
			player.current.pause();
		}
	}
	
	function seekToPosition(position){
		if(player.current){
			player.current.seekTo(position);
		}
	}
	
	return (
		<div style={{width:"640px",height:"320px"}}>
			<NexxPLAY domain="999" media="ABCDEFG" streamtype="video"
			ref={player} />
		</div>
	);

}
```

You can use (nearly) all Functions, that are given in the SDK Overview here:

{% content-ref url="/pages/-M9Y4SzQwnl-IPlt\_6KF" %}
[Playback Control](/javascript-sdk/playback-control.md)
{% endcontent-ref %}

## Available Events

If you decide to listen for the Player Events, you will receive all Events, that are given here:

{% content-ref url="/pages/-M9Ff8FIIKv2tr-6mtmf" %}
[Player Events](/integration-enhancements/player-events.md)
{% endcontent-ref %}

The React Plugin for nexxPLAY also supports Widgets.

{% content-ref url="/pages/L0cxcOPppweV3SR3e3Aw" %}
[Widget React Plugin](/widgets/widget-react-plugin.md)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://play.docs.nexx.cloud/platform-plugins/react-plugin.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.