StreamBoost React Plugin

This page explains how to use the StreamBoost components in React.

Installation

First login to the QUANTEEC npm repo, then install the StreamBoost React plugin:

npm install @quanteec/streamboost-plugin-react --registry https://npm.quanteec.com/

Usage

Button

• Minimal config:

import { StreamboostButton } from '@quanteec/streamboost-plugin-react';

function Example(props: { userID: string }) {
  return <StreamboostButton userID={props.userID} />;
}

• All parameters:

import type Quanteec from '@quanteec/quanteec-plugin/quanteec-my-player.min.js';

import { StreamboostButton } from '@quanteec/streamboost-plugin-react';

function Example(props: { quanteecPlugin: Quanteec, userID: string }) {

  return (
    <StreamboostButton
      backdropBlur={true}
      backdropMode='fullscreen'
      buttonSize={40}
      color='#116af8'
      dashboardCards={['Ranking', 'Peers', 'Water', 'Shared', 'Power', 'Speed']}
      defaultIsOpen={true}
      defaultIsStreamboostOn={true}
      defaultSection='dashboard'
      panelAnchor='bottom right'
      panelMaxHeight={250}
      quanteecPlugin={props.quanteecPlugin}
      sponsor={{
        id: '<my-sponsor>',
        image: 'https://my-sponsor.com/ad-banner.png',
        url: 'https://my-sponsor.com/ad-campaign.html',
      }}
      style={{
        backgroundColor: 'grey',
        padding: '10px',
      }}
      superStream={false}
      userID={props.userID}
    />
  );
}

Panel

• Minimal config:

import { StreamboostPanel } from '@quanteec/streamboost-plugin-react';

function Example(props: { userID: string }) {
  const [isOpen, setIsOpen] = useState(false);

  return (<>
    <button
      onClick={() => setIsOpen(true)}
    >
      open
    </button>
    <StreamboostPanel
      close={() => setIsOpen(false)}
      isOpen={isOpen}
      userID={props.userID}
    />
  </>);
}

Attributes

Mandatory attributes

Attribute	Description
userID	A unique id to identify the viewer.
isOpen (panel only)	A boolean to open or close the panel.
close (panel only)	A callback function that closes the panel, so the panel can close itself.

Panel configuration attributes

Attribute	Description
dashboardCards	A comma-separated list of card names for the dashboard. Default is "Peers, Shared, Energy, Speed". Allowed card names are: CO2, Energy, Peers, Power, Ranking, Shared, Speed, Water.
defaultIsOpen (button only)	A boolean to open the panel by default when the page load.
defaultIsStreamboostOn	A boolean to enable/disable the boost by default (the user can still change the vale afterward).
defaultSection	"dashboard" or "status" to force the default open section.
quanteecPlugin	An instance of the Quanteec plugin.
setClaimAvailable (panel only)	A callback function so the parent component can be informed when the claim becomes available.

Sponsor attributes

Attribute	Description
sponsor	An object containing the sponsor information, with the keys:
sponsor.id	A unique id to identify the advertising campaign. It is required to activate the sponsoring functionality.
sponsor.image	A link to an ad banner with a 4/1 ratio.
sponsor.url	A link to make the image clickable.

Styling attributes

Attribute	Description
backdropBlur	A boolean to enable/disable the blurry background when the panel is open. Default is true.
backdropMode	"fullscreen" or "contained", wether the backdrop covers only it's parent or the all the screen. Default is "fullscreen".
buttonSize (button only)	A number that will be the button width and height in px. Default is 30.
style (button only)	An inline css style to customize the button.
color	A custom color for the panel.
panelAnchor (button only)	The position of the panel relatively to the button. Allowed values are: "center", "bottom left", "bottom right", "top left", "top right". Default is "center". Centering is made relatively to the backdropMode value.
panelMaxHeight	A number used as the maximal height of the panel in pixels, default is 350.
position (panel only)	An object containing two of top, right, bottom, and left properties. The panel can be manually positionned using the following attributes. They take a <length> value. A valid pair (listed in the panelAnchor description) is needed. The panel is centered by default.