Installation

Install the required node packages via NPM or Yarn

$ yarn add react react-dom alpha-male-widgets

Non React app

Import the CSS file

@import '~alpha-male-widgets/dist/main.css';

Create an HTML element which will serve as a container for the widget

<div id="example" />

Import required packages

import React from 'react'
import ReactDOM from 'react-dom'
import { Standing } from 'alpha-male-widgets'

Render the desired widget, for this example we build a Standing widget

const element = React.createElement
const container = document.querySelector('#example')

ReactDOM.render(
  element(Standing, {
    tournamentId: 47 // premier league
  }),
  container
)

Refresh your page, enjoy the widget

Components

We currently have the following components:

• Standing table (league table that shows current standings)
• Events (show results and fixtures for a participant or tournament)

Standing

Render a standing table for a league

Example:

<Standing tournamentId=47 showSeasonSelect=false />

Standing Widget Example

Configuration

tournamentId

Filter the standing table by a specific tournament

• Type: Number
• Required: true

seasonId

Filter the standing table by a specific season

If seasonId is not set, the active season of the league will be picked for you

• Type: Number
• Required: false

showSeasonSelect

Show the dropdown to select the season

• Type: Boolean
• Required: false
• Default: true `

Events

Render a results or fixtures widget for a specific team or league

Example for future events (fixtures) for a specific participant (Arsenal):

<Events participantId=8650 limit=5 future=true />

Example for old events (results) for a specific tournament (Primera Division):

<Events tournamentId=87 limit=10 future=false />

Configuration

tournamentId

Filter events by a specific tournament

• Type: Number
• Required: true (if participantId is null)

participantId

Filter events by a specific participant

• Type: Number
• Required: true (if tournamentId is null)

future

Filter events that haven't been played yet

• Type: Boolean
• Required: false
• Default: true

homeTeamFirst

Show the home team as first team (on the left)

• Type: Boolean
• Required: false
• Default: true

limit

Limit the amount of events

• Type: Number
• Required: false
• Default: 6

API endpoints

Sports

Get the available sports

https://sportwidgets.hercules.gigmedia.com/sports

Tournaments

Get the available tournaments for a sport (in this case soccer)

https://sportwidgets.hercules.gigmedia.com/tournaments?sport_id=1

Participants

Get all the participants for a specific tournament (in this case Premier League)

https://sportwidgets.hercules.gigmedia.com/participants?tournament_id=47

Sources

• Client Application (React) repository
• Server Application (Node.JS) repository
• Cache invalidator (Node.JS) repository
• Sports Data provider website