# Widget React Plugin

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

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

You can find the Project here:

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

## Integration

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

A very simple Usage could look like this:

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

export default function TestWidget{

	return (
		<div style={{width:"640px",height:"320px"}}>
			<NexxWidget domain="999" widgetHash="ABCDEFG" params="{{launchMode:'none'}}" />
		</div>
	);

}
```

## Supported Attributes

You can use the following Attributes directly in your JSX - only "domain" and "widgetHash" 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                                                                                                     |
| **widgetHash**      | String                                                                                      | the "Hash" of the Widget, you want to include                                                                              |
| **secret**          | String                                                                                      | if the Widgets Feed is protected by a secret, enter it here.                                                               |
| **deliveryPartner** | String                                                                                      | if the Media Reporting should be connected to a Delivery Partner, add its Code here.                                       |
| **embedHost**       | String                                                                                      | if you use a custom Embed Domain, enter the Domain (without protocol and Slashes) here. It defaults to "embed.nexx.cloud". |
| **protocol**        | String                                                                                      | if you want to force "http" Usage, set this to "http". It defaults to "https".                                             |
| **params**          | Object with the following possible Keys \[language, affiliatePartner, launchMode, userHash] | if you need additional Parameters, that would be appended via GET Parameters, set them here.                               |

## Interacting with the Widget

If you want to interact with the Widget, you must set "launchMode" to "none" and add a "onWigetClick" Listener to the Component.

This Function will then get all available Details of the clicked Media Item, and your App can process this in any desired Way.

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

class test extends React.Component{
	
	const widget=useRef(null);

        useEffect(() => {
 		if(widget.current){
 			widget.current.setEventListener(onEvent);
 		}
    	}, []);
    
    	function onEvent(event){
    		console.log(event);
    	}
	
	return (
		<div style={{width:"640px",height:"320px"}}>
			<NexXWidget domain="999" widgetHash="ABCDEFG" secret="ABCABCABC"
			 ref={widget}	
			/>
		</div>
	);

}
```