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:
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>
);
}
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. |
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 modified 19d ago