nexxPLAY
Search…
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 nexx 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:
3qnexx/nexxPLAY-React
GitHub

Integration

npm install nexxplay-react
A very simple Usage could look like this:
import React from 'react';
import {NexxWidget} from "nexxplay-react";
class test extends React.Component{
render(){
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.
onWidgetClick
function
to receive the Click Event in your app (see below)

Interacting with the Widget

If you want to interact with the Widget, ypou 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 React from 'react';
import {NexxWidget} from "nexxplay-react";
class test extends React.Component{
onWidgetClick(data){
console.log(data);
}
render(){
return (
<div style={{width:"640px",height:"320px"}}>
<NexXWidget domain="999" widgetHash="ABCDEFG" secret="ABCABCABC"
onWidgetClick={this.onWidgetClick}
/>
</div>
);
}
}