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:

Integration

npm install nexxplay-react

A very simple Usage could look like this:

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").

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.

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>
	);

}

Last updated