alpha-male-widgets

0.0.30 • Public • Published

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 />
<iframe width="100%" height="220" src="https://demo.sportwidgets.gigmedia.com/events?participant_id=8650&future=1&limit=5" /></iframe>

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

<Events tournamentId=87 limit=10 future=false />
<iframe width="100%" height="220" src="https://demo.sportwidgets.gigmedia.com/events?tournament_id=87&future=0&limit=10" /></iframe>

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

Readme

Keywords

none

Package Sidebar

Install

npm i alpha-male-widgets

Weekly Downloads

0

Version

0.0.30

License

none

Unpacked Size

195 kB

Total Files

18

Last publish

Collaborators

  • joost.elders