1.1.0 • Published 4 years ago
@grid-esports/widget-sdk v1.1.0
GRID Widget SDK
Overview
This is the GRID esports Widget SDK providing a series of tools to enable you to use our pre-built widgets within the context of your own site.
Available Widgets
| Series | Tournament |
|---|---|
| series-scoreboard | tournament-list |
| series-table | |
| series-predictions-tracker | |
| series-team-scoreboard | |
| series-livelog | |
| series-timeline | |
| series-comparison | |
| series-map-schematic |
Terminology
| Term | Definition | Examples |
|---|---|---|
| Scope | This is the scope of data you want to see inside the widget. | series-scoreboard = {type: 'series', id: '1'} |
| Title | The given name of a video game that's played as an esport | CSGO, LoL, DOTA etc. |
| Series | A group of games played between the different teams played within a format Bo3 etc. | Astralis vs Sprout |
| Game | A (individual) section of a series, being played out on a fixed map. | CSGO Map, DOTA Map |
| Segment | A section of a game or other segment | CSGO (Warmup/Round) |
Use
Scope
Scope is the most important part of connecting to the widgets, this parameter describes what data you'd like to be able to see inside the widget itself. Most widgets currently only support a single type of scope however this is flexible for the future.
Scope is defined in the following format;
{
"id": "1",
"type": "series"
}| Name | Description | Type | Examples |
|---|---|---|---|
| ID | The ID of the entity from central data you'd like to subscribe to | string | "1", "2034" |
| type | The entity from central data you'd like to subscribe to | enum "series" | "tournament" | "series", "tournament" |
Pure JS
We provide a Pure JS version of the code
import { loadWidget } from '@grid-esports/widget-sdk';
loadWidget({
el: "root",
type: 'series-scoreboard',
scope: {
type: 'series',
id: ,
},
})React
import React from 'react';
import ReactDOM from 'react-dom';
import { Widget } from "@grid-esports/widget-sdk/react";
ReactDOM.render(
<Widget type="series-scoreboard" scope={{type: 'series', id: '1'}} />,
document.getElementById('root'),
)